Question

I have a two step animation which fires once on mouseenter and again on mouseleave.

If i only have one element, that works great, but if i have multiple elements and hover from one to another, the callback of animate() doesn’t fire, which messes up the animation.

$('#userIndex .item').mouseenter(function() {
    $this = $(this).find('.inner');     
    $this.animate({
       'opacity': '0.1'
    }, 100, 'linear', function(){
      $this.find('.front').hide();
      $this.find('.back').show();      
      $this.animate({
        'opacity': '1'
      }, 100);
    });
  }).mouseleave(function() {
    $this = $(this).find('.inner');
    $this.animate({
      'opacity': '0.1'
    }, 100, 'linear', function(){
      $this.find('.back').hide();
      $this.find('.front').show();
      $this.animate({
        'opacity': '1'
      }, 100);
    });
  });

example: http://jsfiddle.net/3KuxS/

Answer 1

Looks like a simple scoping issue.

jsFiddle example

Change:

$this = $(this).find('.inner');

to

var  $this = $(this).find('.inner');