Question

我正在创建一个单页网站，我希望每个div的操作只有在屏幕上显示div时才能工作。

var fixed = false;
var topdivgrad = $('#cont2').offset().top - 200;
var topdivexp = $('#cont3').offset().top - 200;
$.fn.slideLeft = function () {
    return $(this).animate({
        "margin-left": "0px"
    }, 700); 
}
$.fn.rollUp = function () {
    return $(this).switchClass("hide-image", "show-image", 700, "easeInOutQuad"); 
}
$(document).ready(function () {
    $('#fade_object').animate({
        'margin-top': '8%' 
    }, {
        duration: 1000
    });
    $('#fade_object').animate({
        'margin-top': '3%'
    }, {
        duration: 200
    });
});
$(document).scroll(function () {
    if ($(this).scrollTop() >= topdivgrad && $(this).scrollTop() < topdivexp) {
        if (!fixed) {
            fixed = true;
            $(".title").slideLeft();
            $("div.image").rollUp();
        }
    }
    if ($(this).scrollTop() >= topdivexp) {
        if (!fixed) {
            fixed = true;
            $('#popup_object1').delay('500').animate({
                'width': '+=40',
                'height': '+=40', 
                'margin-left': '-=20',
                'margin-top': '-=20'
            }, 500, function () {
                $('#popup_object1').animate({
                    'width': '-=10',
                    'height': '-=10',
                    'margin-left': '+=5',
                    'margin-top': '+=5'
                }, 200, function () {
                    $('#year1').children("h1").animate({
                        'margin-top': '-=50',
                        'height': '+=50'
                    }, function () {
                        $('#year1').children("p").show();
                    });
                });
            });
            $('html, body').animate({ 
                scrollTop: topdivexp + 200
            }, 'slow');
        }
    }
});

不幸的是，这只适用于第二个div;如果我在显示屏幕时刷新屏幕，它也适用于第三个div。

Answer 1

由于您已经在使用jQuery，我建议使用这个非常小的插件：http://www.appelsiini.net/download/jquery.viewport.js

然后您可以使用此选择器：$('div1:in-viewport')

当它在屏幕上时，启动每个div的jquery效果

1 个答案: