CODEWITHSUNDEEP
javascriptjqueryanimationscroll
Vidro3
Vidro3

Reputation: 234

Stop animation at certain position on page [jQuery]

I have a div that moves across the page on a keydown event listener. I'm trying to find a way to make it stop after either a certain number of keydowns (calculated by step * clicks > screen size) or when the animated div reaches the end of the screen, which I guess would need to be responsive to screen size.

Currently the animate continues to fire on keydown and the div will scroll off out of view.

An example of this is the second demo on this page: http://api.jquery.com/animate/ You can click left or right until the block moves out of view. How would I contain it to it's uh, container?

here's my jsfiddle: https://jsfiddle.net/vidro3/1a8tnuer/

var count1 = 0;
var count2 = 0;
// 1. Get two divs to move on different key presses;
  $(function(){
    $(document).keydown(function(e){
     switch (e.which){
       case 39:    //lright arrow key
          count2++;
        $('.box2').animate({
           left: '+=50'
         });
        break;
      case 90:    //z key
        count1++;
        $('.box1').animate({
            left: '+=50'
            });
        break;
      }
  });
});

// 2. Get one div to move on button click;
$(function(){
$( '#start' ).click(function() {
  alert('Chug that Duff!');
   var rabbit = $(".rabbit");
   rabbit.animate({left: '+=100%'}, 'slow');
  });
});
$(function(){
  var winPos = $('#background').width();
    if (winPos/50 > count1)
    alert('Homer Wins!');
   else if (winPos/50 > count2)
    alert('Barney Wins!');
});

Upvotes: 0

Views: 1253

Answers (1)

Matt Davis
Matt Davis

Reputation: 371

Just add a conditional to the animation:

var maxLeft = $(window).width() - $('.box1').width();

// If the box's x-position is less than the max allowed, then animate
if ($('.box1').position().left < maxLeft) {
    $('.box1').animate({
        left: '+=50'
    });
}

The value (window width - box width) is the point at which the box is at the end of the screen. Note that your step size may take the box past the end of the screen depending on the current window size (it's probably not divisible by 50, for example), so you may want something like this instead:

var stepSize = 50;
var maxLeft = $(window).width() - $('.box1').width();

// If the box's x-position is less than the max allowed, then animate
if ($('.box1').position().left < maxLeft) {
    var diff = maxLeft - $('.box1').position().left;

    // If the next step would take the box partially off the screen
    if (diff < stepSize) {
        $('.box1').animate({
            left: '+=' + diff
        });
    } else {
        $('.box1').animate({
            left: '+=' + stepSize
        });
    }
}

Edit: here's a shorter version using the ternary operator:

var stepSize = 50;
var maxLeft = $(window).width() - $('.box1').width();

// If the box's x-position is less than the max allowed, then animate
if ($('.box1').position().left < maxLeft) {
    var diff = maxLeft - $('.box1').position().left;

    $('.box1').animate({
        left: '+=' + (diff < stepSize ? diff : stepSize)
    });
}

Upvotes: 1

Related Questions