使用jQuery在滾動事件中滑動div

Question

我使用jQuery淡入我的頁面底部的「幻燈片」，這是一個應該粘在右側的小標籤。我目前正在耽擱時間，但我希望在用戶滾動時淡入。

儘管如此，它一直在頁面上滑動div，而不是將它粘在一邊。

$(function() { 
     var slide = $("div[data-slide='true']"); 

     $(window).scroll(function() { 
      var pos = $(document).scrollTop(); 
      console.log(pos); 
      if ($(document).scrollTop() > 400) { 
       slide.animate({opacity: 1,right:'+=350'},1350, 'swing').stop(); 

      } else { 
       slide.clearQueue().animate({opacity: 0,right:'-=350'},500, 'easeOutBounce'); 
      } 
     }); 

    }); 

一旦達到初始航點，我該如何停止滑動？我似乎能夠解除與$(window).unbind('scroll');滾動事件，但然後幻燈片從未動畫。

Answer 1

每次啓動滾動事件時，您都會啓動一個新的動畫到+ 350px，這就是爲什麼它會在整個頁面上移動。
我做了一個小測試，以防止這種情況。我基本上添加兩個VARS（打開和關閉），以防止從動畫開始多次，並且改變了動畫本身有點：

演示：
http://jsfiddle.net/B7pJL/1/

JS：

var slide = $("div[data-slide='true']"); 
var opening = false; 
var closing = false; 
$(window).scroll(function() { 
    var pos = $(window).scrollTop(); 
    console.log(pos); 
    if (pos > 100) { 
     if (!opening) { 
      opening = true; closing = false; 
      slide.stop().animate({ 
       opacity: 1, 
       'margin-left': -350 
      }, 1350, function() { 
       opening = false; 
      }); 
     } 

    } else { 
     if (!closing) { 
      closing = true; opening = false; 
      slide.stop().animate({ 
       opacity: 0, 
       'margin-left': 0 
      }, 500, function() { 
       closing = false; 
      }); 
     } 
    } 
});​