javascript - 淡入淡出滑动 Javascript

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)

这段代码，正在改变背景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**/}
 });