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;
            });
        }
    }
});

在滚动事件上使用jQuery滑动div

1 个答案: