CODEWITHSUNDEEP
javascriptjqueryanimationwindow-resize
Nicole Harris
Nicole Harris

Reputation: 860

Stop/Restart an animation loop on window resize

I have an animation where three images rotate up and down. JSfiddle: http://jsfiddle.net/rLgkyzgc/1/

$(window).load(function() {

    // Load images in BG that have been hidden by CSS
    $('.banners').show();

    // Create an empty array
    var banners = [];

    // Fill array with banner ids
    $('.banners').each(function () {
        var banner = $(this).attr('id');
        banners.push(banner);
    });

    function switchBanners(){

        var $firstBanner = $('#' + banners[0]);
        var $secondBanner = $('#' + banners[1]);
        var firstBannerHeight = $firstBanner.height();
        var secondBannerHeight = $secondBanner.height();

        $firstBanner.animate({ bottom: -firstBannerHeight }, 1200);
        $secondBanner.animate({ bottom: 0 }, 1200, function(){
            b = banners.shift(); banners.push(b);
            setTimeout(function(){
                switchBanners();
            }, 4000);
        });
    };

    // Delay initial banner switch
    setTimeout(function(){
        switchBanners();
    }, 4000);

});

This is great for the desktop view, but on mobile, I want to stop the animation and just show one static image.

So my questions. How can I :

Upvotes: 1

Views: 1938

Answers (2)

Raibaz
Raibaz

Reputation: 9700

You should use window.matchMedia (see the documentation) to detect the viewport size on document.ready and when the window is resized, so something like this:

function resetAnimation() {
    $firstBanner.stop(true, true);
    $secondBanner.stop(true, true);
    if(window.matchMedia("(min-width: 940px)").matches) {
        //Start the animations here
    }
}


$(document).ready(function() {
    resetAnimation();
}

$(window).resize(function() {
    resetAnimation();
}

Note that you don't really need to stopthe animations on document.ready, but this way you have a single function to reset the animations and then restart them only if necessary, which is something you typically want to do every time you resize the browser window, regardless of the viewport size.

Upvotes: 2

Daniel
Daniel

Reputation: 66

I'll reference these in order:

1. Only start the animation on page load if the window width is > 940px

In your window load function, grab your browser width with $(window).width(). Then check that against your 940 (leave off the "px"), and perform necessary actions.

So:

if ($(window).width() > 940){ *actions* }

2. Stop (reset) the animation if the page is resized to be < 940px wide

To do this, you'll need to use the window resize function ($(window).resize()) and check your 940 against the browser width.

So:

$(window).resize(function(){
  if ($(window).width() <= 940){
    *stop (reset) animation*
  }
});

3. THEN restart the animation if the page resized to be > 940px wide

This logic is essentially the same as #2, just reversed:

$(window).resize(function(){
  if ($(window).width() > 940){
    *restart animation*
  }
});

Upvotes: 1

Related Questions