jquery - 在滚动事件上使用 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'); 解除滚动事件的绑定(bind)。但随后幻灯片永远不会动画。

Answer 1

每次触发滚动事件时，您都会开始一个新的动画到 +350px，这就是它在页面上移动的原因。
我做了一个小测试来防止这种情况。我基本上添加了两个变量(打开和关闭)以防止动画多次启动，并对动画本身进行了一些更改:

演示:
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;
            });
        }
    }
});​