jQuery同时动画和淡化背景图像

时间:2012-10-01 18:58:38

标签: jquery jquery-animate fadein fadeout

我有一个选择器我正在尝试动画,同时淡出它的背景图像并淡入另一个背景图像。这就是我到目前为止所拥有的。该脚本工作正常,但它首先动画然后淡出。你知道一种方式,它同时会动画和淡化吗?

$(document).ready(function(){
    $(".selector").click(function () {
        $(this).animate({left: "75px"}, function () {
            $(this).fadeOut("fast", function () {
                $(this).addClass("selector-hover").fadeIn("fast");
            });
        });

        return false;
    });
});

我希望这是有道理的。谢谢你的帮助。

3 个答案:

答案 0 :(得分:1)

是的,不要放弃回调......

$(document).ready(function(){
    $(".selector").click(function () {
        $(this).animate({left: "75px"}).fadeOut("fast", function () {
            $(this).addClass("selector-hover").fadeIn("fast");
        });
        return false;
    });
});

答案 1 :(得分:0)

这是在动画回调中包含FadeIn的效果。 由于回调是在动画结束后触发的,所以在淡入开始时动画已经完成..

尝试将fadeOut和fadeIn移动到animate回调之外,它应该正常工作..

答案 2 :(得分:0)

可以在jquery animate页面中使用这个例子

$( "#go1" ).click(function(){
  $( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
     .animate({ fontSize: "24px" }, 1500 )
     .animate({ borderRightWidth: "15px" }, 1500 );
});

http://api.jquery.com/animate/ 队列false应该可以解决问题,看看页面并查看它的实际效果。您需要向下滚动