I want to stop animating during scroll event in jQuery

In jQuery, the contents are displayed by scrolling position.
There is a part of the animation that changes the position of the image after displaying it, but it moves many times every time I scroll (I want to stop just once)

$(window).scroll(function(){
    var scroll=$(window).scrollTop();
    var windowHeight=$(window).height();
    $('#box1').each(function(){
        varboxPos=$(this).offset().top;
        if(scroll>boxPos-windowHeight+300){
            $(this).find('.transparency').animate({
                'opacity': '1'
            }, 600);
            $(this).find('.textarea') .delay(400).animate({
                'opacity': '1',
            }, 600, function() {
                $('#moveimg01').delay('200').animate({
                    'left': '270px',
                    'bottom': '20px'
                }, 300, function() {
                    $('#moveimg01') .animate({
                        'left': '250px',
                        'bottom': '0'
                    }, 200);
                });
            });
        }
    });
    $('#box2') .each(function(){
        varboxPos=$(this).offset().top;
        if(scroll>boxPos-windowHeight+300){
            $(this).find('.transparency').animate({
                'opacity': '1'
            }, 600, function() {
                $('#moveimg02') .delay(200).animate({
                    'right': '-20px',
                    'top': '40px'
                }, 300, function() {
                    $('#moveimg02').animate({
                        'right': '0',
                        'top': '60px'
                    }, 200);
                });
            });
            $(this).find('.textarea') .delay(400).animate({
                'opacity': '1',
            }, 600);
        }
    }); ...continued

This Last

$('#moveimg01') .animate({
  'left': '250px',
  'bottom': '0'
}, 200);

I'd like to stop each part, but it keeps moving every time I scroll.
Is there any other way to stop or write in this part?

jquery

2022-09-30 21:10

2 Answers

Record the element position on the screen each time you scroll. ($(anim element).offset().top+$(anim element).outerHeight()) -$(window).scrollTop() is minus ->plus.
Or
$(anim element).offset().top-($(window).scrollTop()+$(window).height()) is a positive value ->

when the value is negative Why don't you just animate it?

The previous element location is $(anim element).data('before',beforePos); and I wonder if I should set it for each element

2022-09-30 21:10

I think there is a way to keep the state of each element in JS, but
I often use html class to manage the state and JS to determine it.

#moveimg01 element with classes such as .toAnimate and

$('#box1').hasClass('toAnimate').each(function(){
    varboxPos=$(this).offset().top;
    if(scroll>boxPos-windowHeight+300){
        $('#box1') .removeClass('toAnimate')// Now delete the class
        // ...omitted...
            }, 300, function() {
                $('#moveimg01') .animate({
                    'left': '250px',
                    'bottom': '0'
                }, 200);
            });
        });
    }
});

If you write something like that, once you animate it, it won't be animated anymore.

$('#box1.toAnimate').each(

But it's good.

In a similar way, assign a class such as .isAnimated to the element that moved. If you have a class, you won't let them handle it.

It has nothing to do with the question, but I am writing because I am concerned about the code.

$('#box1') .each(... and other elements with the same ID should not exist, but you are using .each()

=> Does this part need to be each()?Check it out.

$('#moveimg01') and so on multiple times

= > More retrieval times (number of element searches) = Processing is slow, so

var$target=$('#moveimg01');
$target.delay('200').animate({
    // ...omitted...
}, 300, function() {
    $target.animate({
        // ...omitted...
    }, 200);
});

It's good to write like this.

2022-09-30 21:10

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656