标签: jquery-animate

.animate()的回调错误?

我正在尝试制作一些div来制作动画,然后在回调中调用另一个函数.没什么难的.这是代码:

function transfertMenu(){
    var chosenOption = this.firstChild.firstChild.id;
        $('#leftMenucontent').animate({
            left:'0px'
        }, 500, constructMenu());
    $('#leftMenucontent > ul > li').remove();
    chooseMenu(chosenOption);
}
Run Code Online (Sandbox Code Playgroud)

并尝试过

function transfertMenu(){
    var chosenOption = this.firstChild.firstChild.id;
        $('#leftMenucontent').animate({
            left:'0px'
        }, 500, function() {
        constructMenu();
    });
    $('#leftMenucontent > ul > li').remove();
    chooseMenu(chosenOption);
}
Run Code Online (Sandbox Code Playgroud)

问题是,当我在回调(constructMenu)中放置一个alert()时,它完美地运行,动画结束,然后弹出警报.当我输入一个函数时,它会在动画完成之前从头开始.这是一个错误,还是我做错了什么?

javascript jquery jquery-animate

1
推荐指数
1
解决办法
180
查看次数

更改<div>部分的背景颜色

我正在尝试使用按下按钮时jQuery更改部分的背景颜色<div>,下面是执行该操作的代码.为什么不工作?

HTML文件

<html>
<head>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="script.js"></script>
<style type="text/css"> 
#name{
background-color: #FFFFF2;
width: 100px;
}
</style>
</head>
<body>
<input type="button" id="bgcolor" value="Change color"/>
<div id="name">
Abder-Rahman
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

的script.js

$("bgcolor").click(function(){
    $("#name").animate(
        {backgroundColor: '#8B008B'},
        "fast");}
);
Run Code Online (Sandbox Code Playgroud)

谢谢.

jquery jquery-animate

1
推荐指数
1
解决办法
3376
查看次数

带有.a​​nimate的jQuery Custom Easing插件

我正在使用jQuery插件进行自定义Easing(jQuery Easing v1.3 -http://gsgd.co.uk/sandbox/jquery/easing/),为我的jQuery Tools可滚动实例添加自定义缓动,如下所示:

$(".historyScrollable").scrollable({ easing:"easeInOutCubic"}).navigator();

我希望也能使用jQuery Easing插件与.animate函数一起使用

我试过像这样使用它:

$(this).find('div').stop().animate({'marginLeft':'-280px'},200,easeInOutCubic);

但它说没有定义"easeInOutCubic".我正在做的是什么,而我的语法错了?我也试过使用specialEasing,但似乎也没有用:

$(this).find('div').stop().animate({'marginLeft':'-280px'},{duration:200, customEasing:{'marginLeft':'easeInOutCubic'}});

jquery jquery-easing easing jquery-animate

1
推荐指数
1
解决办法
1719
查看次数

if-statement以div margin-top为条件?

我想创建一个if - else条件系统,只有当上边距不是0时才允许向上滚动.我将在jquery中使用.animate动作来创建动画.

$('#up-arrow a').click(function(){
    if('#slider'.css(margin-top)!='0px')
        $('#slider').animate({'margin-top':'+=320px'});
    else
Run Code Online (Sandbox Code Playgroud)

有人可以帮我纠正一下吗?它没有if,但在我添加了if-else后它什么也没做.

javascript css jquery if-statement jquery-animate

1
推荐指数
1
解决办法
2876
查看次数

jQuery动画切换

这是一个非常直截了当的问题.我基本上在页面上有一个div块,当点击时,它的大小会增加,再次点击时会返回到原来的状态.我的问题是它似乎根本不起作用.另外,我确信在两个动画状态之间切换的方式要比这样的if语句更清晰,但是我不确定如何去做.

$(document).ready(function(){
    var toggle = 0;
    $(".login").click(function(){
        if($toggle == 0){
            $(this).animate({
                height: '200',
            }, 500, function(){
            });
            $toggle = 1;
        }
        else if($toggle == 1){
            $(this).animate({
                height: '100',
            }, 500, function(){
            });
            $toggle = 0;
        }
    });
});
Run Code Online (Sandbox Code Playgroud)

相应的HTML代码很简单

<div class="login">Click Me</div>
Run Code Online (Sandbox Code Playgroud)

如果还有其他需要,请告诉我.

jquery toggle jquery-animate

1
推荐指数
1
解决办法
1万
查看次数

jQuery Animate Border似乎不起作用

在这段代码中,jQuery Animate边框似乎不能很好地运行:http: //jsbin.com/ewuyup/13/edit

有没有人有任何想法来解决它?

我在Animate的jQuery网站上看到了这个.

不完全支持速记CSS属性(例如字体,背景,边框).例如,如果要为渲染的边框宽度设置动画,则必须至少预先设置"auto"以外的边框样式和边框宽度.或者,如果要为字体大小设置动画,则可以使用fontSize或CSS等效的'font-size'而不是简单的'font'.

希望可以有人帮帮我.

html css jquery jquery-animate

1
推荐指数
1
解决办法
1677
查看次数

jQuery函数循环更改背景图像崩溃firefox

我希望背景图像淡出.

我有两个div在彼此之上,背景设置为图像.

在我的jQuery中,我定位一个div,然后将不透明度显示为零,显示另一个.然后我反过来.但是,这是有效的,但现在由于某种原因,这个无限循环崩溃了Firefox.

我该怎么做才能让它不崩溃?

             $(document).ready(function() {
                function change (){
                  $('#back1').animate({opacity:0}, {duration:3000});
                  $('#back1').delay(1000);
                  $('#back1').animate({opacity:1},  {duration:3000});
                  $('#back1').delay(1000);
                  change();

                }

                change();

            });
Run Code Online (Sandbox Code Playgroud)

jquery jquery-animate

1
推荐指数
1
解决办法
349
查看次数

如何在jQuery中重复函数调用

我有这个代码:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() { 
        function loop(){
            $('#picOne').fadeIn(0).fadeOut(8000);
            $('#picTwo').delay(2000).fadeIn(6000).fadeOut(5000);
            $('#picTree').delay(10000).fadeIn(2000).fadeOut(16000);
            $('#picFour').delay(12000).fadeIn(16000).fadeOut(5000);
        }
        loop();
    });
</script>
Run Code Online (Sandbox Code Playgroud)

但是当最后一张照片淡出时,代码不会重复.问题是什么?

jquery jquery-animate

1
推荐指数
1
解决办法
3万
查看次数

如何使用jQuery动画步骤为多个属性设置动画?

$(element).animate(
    {
        scale: 1,
        centerX: -(this.chartObj.model.m_AreaBounds.Width /2),
        centerY:-(this.chartObj.model.m_AreaBounds.Height /2)
    },
    {
        duration: 2000,
        step: function(now,fx) {
            var scaleVal, x, y;
            if (fx.prop == "scale") {
                scaleVal = now;
                x = 0;
                y = 0;
            } else if (fx.prop == "centerX") {
                x = now;
                y = 0;
                scaleVal = 0;
            }
            else if (fx.prop == "centerY") {
                x = 0;
                y = now;
                scaleVal = 0;
            }
            $(element).attr("transform", "translate("+x*(scaleVal-1)+","+(y*scaleVal-1)+")scale(" + now + ")");
        }
    }
);
Run Code Online (Sandbox Code Playgroud)

在步骤函数中,prop值将逐步进行(即,首先scale,然后centerX …

jquery jquery-animate

1
推荐指数
1
解决办法
3825
查看次数

jQuery中的Animate不透明度会留下ghost元素

当我为某些元素的不透明度设置动画时,似乎动画并不总是完成.我的工具提示的结果如图所示(复制,在div上来回摆动鼠标):

在此输入图像描述

方框1和方框2上面仍然有鬼元素.

这是我的jQuery

$(document).ready(function(){
    $(".thumbnail").hover(function(){
        $(this).parent().find(".tooltip").animate({
            opacity: 1,
            top: '105%'
        }, 200, 'swing', false);
        $(this).find(".label").stop(false, true).fadeIn(2); 
    },function(){
        $(this).parent().find(".tooltip").animate({
            opacity: 0,
            top: '100%'
        }, 200, 'swing', false);
        $(this).find(".label").stop().fadeOut();
    });

    $(".label").click(function(){
        var url = $(this).find('h3 a').attr('href');
        window.location.href = url;

    })
});
Run Code Online (Sandbox Code Playgroud)

还有一个小提琴:http://jsfiddle.net/qu7Tu/

jquery jquery-animate

1
推荐指数
1
解决办法
614
查看次数