0

ここで私のコードにいくつかの問題があります。ユーザーのスクロール時にブラケットが画面に表示されるたびに、ブラケットがアニメーション化されるようにします。私の問題は、ページ上のすべての h2 要素が、画面に表示される代わりに同時にアニメーション化されることです。以下は使用されている jQuery で、jsfiddle へのリンクは次のとおりです。

http://jsfiddle.net/CbxvH/18/

前もってありがとう、マイク。

    $(window).scroll( function(){

        var test1 = $('article h2 span.bracket1');
        var bottom_of_object1 = $(test1).position().top + $(test1).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        if( bottom_of_window > bottom_of_object1 ){

            $(test1).addClass( "slideLeft" );
            setTimeout(function() {
              $("article h2 .spanContent").animate({'opacity':'1'},1000);
            }, 1000);


    };

        var test2 = $('article h2 span.bracket2');

        var bottom_of_object2 = $(test2).position().top + $(test2).outerHeight();

        if( bottom_of_window > bottom_of_object2 ){

            $(test2).addClass( "slideRight" );

        };

        var test3 = $('article h2 span.bracket3');

        var bottom_of_object3 = $(test3).position().top + $(test3).outerHeight();

        if( bottom_of_window > bottom_of_object3 ){

            $(test3).addClass( "slideLeft" );
            setTimeout(function() {
              $("article h2 .spanContent2").animate({'opacity':'1'},1000);
            }, 1000);

        }

        var test4 = $('article h2 span.bracket4');

        var bottom_of_object4 = $(test4).position().top + $(test4).outerHeight();

        if( bottom_of_window > bottom_of_object4 ){

            $(test4).addClass( "slideRight" );

        }


});

各ステートメント:

$('.featureImages img, article p, article ul li').each( function(i){

        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        if( bottom_of_window > bottom_of_object ){

            $(this).animate({'opacity':'1'},1000);

        }

    });
4

1 に答える 1

1

offset()の代わりに使用してみましたposition()か?

var offset =  $(test1).offset();  
var bottom_of_object1 = offset.top + $(test1).outerHeight();
于 2013-09-13T13:38:08.880 に答える