CODEWITHSUNDEEP
jqueryanimation
Andy
Andy

Reputation: 1432

Sliding animation, not quite working perfectly

http://jsfiddle.net/UhNHW/

I'm trying to get a color block to slide in behind existing content inside a small block. It's glitchy and I need to get it to work for multiple instances on the same page.

Any help is appreciated.

Upvotes: 0

Views: 44

Answers (3)

Andreas Wong
Andreas Wong

Reputation: 60536

is this what you want?

http://jsfiddle.net/UhNHW/20/

I basically add a check whether .box2 is being animated, if so, just return without anything.

$(function() {
    $('.container').on('mouseenter', function() {
        var box = $(this).find('.box2');
        if(box.is(':animated')) return false;
        box.stop(true, true).animate({
            top: 0
        }, 150);
    });
    $('.container').on('mouseleave', function() {
        var box = $(this).find('.box2');
        if(box.is(':animated')) return false;
        box.stop(true, true).animate({
            top: 40
        }, 150);
    });
});​

Upvotes: 1

silly
silly

Reputation: 7887

use mouse leave like this

   $('.container')
       .mouseover(function (){
            $('.box2').stop(true, true).animate({top:0}, 150);
       })
       .mouseleave(function (){
            $('.box2').stop(true, true).animate({top:40}, 150);
       })
       ;

for more instances try this

  $('.container').each(function() {
      var c = $(this);
      var box = c.find('.box2');

      c.          
          mouseover(function (){
            box.stop(true, true).animate({top:0}, 150);
          })
          .mouseleave(function (){
            box.stop(true, true).animate({top:40}, 150);
          });
  });

Upvotes: 0

Francisc
Francisc

Reputation: 80445

Use mouseenter and mouseleave instead of mouseover and mouseout.

mouseout is triggered when the cursors enters another child element of the parent div.

Upvotes: 3

Related Questions