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

【问题标题】：jQuery animate and fade background image at the same timejQuery同时动画和淡化背景图像
【发布时间】：2012-09-22 15:47:43
【问题描述】：

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

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

        return false;
    });
});

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

【问题讨论】：

只在同一个元素上调用动画，而不是在回调中

标签： jquery jquery-animate fadein fadeout

【解决方案1】：

是的，不要在回调中加入淡入淡出...

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

【讨论】：

感谢凯的回答。不幸的是，它仍然会分别触发这两种效果。

【解决方案2】：

好吧，使用 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 应该可以解决问题，查看页面并查看它的运行情况。您需要向下滚动一下

【讨论】：

感谢黄教。这就是我一直在寻找的。span>
幸运的是我刚刚用这个做了一个小部件，yw

【解决方案3】：

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

尝试将淡出和淡入移到动画回调之外，它应该可以正常工作..

【讨论】：

感谢苏珊斯的回答。这就是我在阅读凯的回答后所做的。不幸的是，它仍然会分别触发这两种效果。