jQuery 函数一次又一次循环

jQuery function looping again and again

我想创建一个动画,其中网站的滚动背景图像会发生变化。变化发生在 fadeIn 和 fadeOut 效果上,但是由于滚动功能,淡入淡出效果会发生多次。

JSFiddle

Jquery Code: 
var styles01 = {"background" : "url(https://iso.500px.com/wp-content/uploads/2016/02/cover.jpg) fixed",
                 "background-size":"cover"}; 
var styles02 = {"background" : "url(http://www.mybligr.com/wp-content/uploads/2017/02/beautiful-lake-wallpaper-nature-photos-pics-images-pictures-16.jpg) fixed",
            "background-size":"cover"};
var styles03 = {"background" : "url(https://cdn.fodors.com/ee/files/slideshows/9-derwent-water-lake-district-england.jpg) fixed",
            "background-size":"cover"};

$(window).scroll( function() {
 if ($(window).scrollTop() >= 50 && $(window).scrollTop() <= 150) {
     $(".wrap").fadeOut(200);
    $(".wrap").css(styles01);
     $(".wrap").fadeIn(200);
  } 
 if ($(window).scrollTop() >= 150 && $(window).scrollTop() <= 250) {
      $(".wrap").fadeOut(200);
    $(".wrap").css(styles02);
       $(".wrap").fadeIn(200);
  }
 if ($(window).scrollTop() < 50) {
     $(".wrap").fadeOut(200);
    $(".wrap").css(styles03);
      $(".wrap").fadeIn(200);
  }
});

这似乎是一个时间问题,因为您正在尝试在初始淡出完成之前重新设置样式和重新淡入淡出。这是一个异步操作:

$(".wrap").fadeOut(200);

所以任何需要在这个操作之后发生的事情都应该放在它的回调中,而不是紧跟在这行代码之后。像这样:

$(".wrap").fadeOut(200, function () {
    $(".wrap").css(styles01);
    $(".wrap").fadeIn(200);
});

Updated fiddle.