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

Posted

技术标签:

【中文标题】jQuery同时动画和淡化背景图像【英文标题】:jQuery animate and fade background image at the same time 【发布时间】: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;
    );
);

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

【问题讨论】:

只在同一个元素上调用动画,而不是在回调中 【参考方案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 的效果。 由于回调是在动画结束后触发的,所以在淡入开始时动画已经完成..

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

【讨论】:

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

以上是关于jQuery同时动画和淡化背景图像的主要内容,如果未能解决你的问题,请参考以下文章

如何淡化动画背景图像(全尺寸)[关闭]

全景背景图像淡入动画问题?

JQuery 帮助 - 动画背景颜色

Jquery淡入淡出背景/表格行上的动画背景颜色

具有 100% 宽度的 CSS 背景图像和动画滚动直到图像完成

如何为背景图像的更改设置动画?