jQuery函数一次又一次地循环

Question

我想创建一个动画，其中网站的滚动背景图像发生变化。使用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);
  }
});

Answer 1

这似乎是一个时间问题，因为你在最初的淡出完成之前尝试重新设计并重新淡化。这是一个异步操作：

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

因此，在此操作之后需要发生的任何事情应放在其回调中，而不是紧接在此行代码之后。像这样：

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

Updated fiddle