0

mouseenterで1回、mouseleaveで2回起動する2段階のアニメーションがあります。

要素が 1 つしかない場合はうまく機能しますが、複数の要素があり、ある要素から別の要素に移動すると、animate() のコールバックが起動せず、アニメーションが台無しになります。

$('#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);
    });
  });

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

4

1 に答える 1

0

単純なスコープの問題のように見えます。

jsFiddle の例

変化する：

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

に

var  $this = $(this).find('.inner');
于 2013-02-18T16:31:42.080 に答える