Question

我已经为我的期末考试做了一个学校项目了好几天了，这件事发生了：我的div继续淡入淡出，过了一会儿他们就停止了，到目前为止我已经带着这个jquery来了

这里我创建了一些变量让div在达到固定高度时消失（div在css中看起来是粘性的，所以无论何时我都想要它都不会起作用）

$('.processor').each(function(){
$counter += 1;
fromTop[$counter] = $(this).offset().top;
});

$(window).scroll(function() {
$counter = 0;
$('.processor').each(function(){
    $counter += 1;
    if($(window).scrollTop() > fromTop[$counter])
    {
        $(this).fadeTo(500,0);   
    }
    else
    {
        $(this).fadeTo(500,1);
    }
    if($(window).scrollTop() > fromTop[$counter-1])  //Check if the scroll is enought to make the other div appear
    {
        $(this).fadeTo(500,1);
    }
 });
 });

--- css ---

.processor{
width:65%;
height:70%;
background: linear-gradient(rgba(179, 0, 0, 0.75), rgba(95, 0, 0, 0.75));;
margin: 0 auto;
overflow:hidden;
border-radius:3px;
top: 18%;
position:sticky;
margin-bottom:250px;
}

Answer 1

我会做一些事情，比如使用setTimeout延迟触发动画直到滚动停止：

＆＃13;

var $window = $(window), // cache this for better performance
    timeoutVar ; // declare timeoutVar 

$window.scroll(function() {
  clearTimeout(timeoutVar);  // clear timeout so it doesn't fire fade function
  
  timeoutVar = setTimeout(fade, 100); // run the fade function in 100ms (will only run if scrolling has stopped)
});


function fade() {
  $('.processor').each(function(index, item) {   // get your passed in items so you can use them
    var $item = $(item); // this is just the proper way of doing $(this);
    
    if ($window.scrollTop() > fromTop[index + 1]) {  // just use the index - instead of the counter (they pretty much do the same thing)
      $item.fadeOut(500);  // you may as well use fade in and fadeout
    } else {
      $item.fadeIn(500);  // you may as well use fade in and fadeout
    }
    
    // seems a bit weird you fade the same thing based on something else
    if ($window.scrollTop() > fromTop[index]) //Check if the scroll is enought to make the other div appear
    {
      $item.fadeIn(500);  // you may as well use fade in and fadeout
    }
  });
}

＆＃13;

根据评论更新

好的，因为你需要立即开始制作动画，我会停止现有的动画

＆＃13;

var $window = $(window);

$window.scroll(function() {
  fade());
});


function fade() {
  $('.processor').each(function(index, item) { // get your passed in items so you can use them
      var $item = $(item); // this is just the proper way of doing $(this);

      // this if is if the current item is scrolled into view and there is no next item or the scroll is below the next item
      if ($window.scrollTop() > fromTop[index] && (typeof fromTop[index + 1] === 'undefined' || $window.scrollTop() < fromTop[index + 1])) {
        $item.stop().fadeIn(500); // you may as well use fade in and fadeout -- add stop() to stop excisting animatiohn
      } else {
        $item.stop().fadeOut(500); // you may as well use fade in and fadeout
      }
    }
  });
}

＆＃13;

Answer 2

jQuery会在队列中添加动画，这可能导致一段时间后播出多个动画（我记得很久以前在使用mouseOver动画的多个网站上看过这个动画）。

问题在于，您确实希望每次窗口滚动时进行检查，但当用户滚动时，该事件会被多次触发。如果您知道在.scroll函数中设置的动画是final，则可以将动画队列显式设置为1，如下所示：

if ($(this).queue().length > 1) $(this).queue() = 1; //do this before applying fadeTo

这将允许队列完成当前动画，然后运行您想要的动画，然后结束。因此，在滚动了很多次之后，div最多只能通过2个动画。

淡入淡出动态div

2 个答案: