Question

我有这个网站，www.harispapadakis.eu，我使用此代码

function changeBackground() {
    ++currentBackground > 2 && (currentBackground = 0),
    $(".c-hero").fadeOut(4e3, function() {
        $(".c-hero").css({
            "background-image": "url('" + backgrounds[currentBackground] + "')"
        }), 
        $(".c-hero").fadeIn(3e3)
    }), 
    setTimeout(changeBackground, 15e3)
}

var currentBackground = 0,
    backgrounds = [];

backgrounds[0] = "media/main.jpg", 
backgrounds[1] = "media/main2.jpg", 
backgrounds[2] = "media/main3.jpg", 
$(document).ready(function() {
    setTimeout(changeBackground, 7500)
});

（编辑备注：根据缩小代码格式化，其中if缩小为&&，;缩小为,，3000缩小为3e3）

这段代码正在用FadeIn和FadeOut改变背景src ......

我想用幻灯片向左更改淡入淡出...它改变了背景图片，我想要一个漂亮的动画..

提前致谢

Answer 1

这个答案可能有所帮助：How do you fadeIn and animate at the same time?

不要使用.fadeIn，而应考虑使用jQuery的.animate函数来执行多个css转换。

例如，而不是：

$(".c-hero").fadeIn(3e3)

尝试@see http://api.jquery.com/animate/：

$(".c-hero").animate(
   {opacity: 1, left: "-=50"}, // css attributes to animate
   3000, // duration in seconds
   function(){ /**callback function after it completes**/}
 });

淡入淡出Javascript

1 个答案: