如果我很快移動鼠標，如何停止對角線漸變？

我有下面的代碼，但如果我真的很快移動鼠標，圖像仍然不斷褪去&。如果我很快移動鼠標，如何停止對角線漸變？

stop()如果我使用animate()的作品，但是當我使用這個插件時，它不會。

$('.person a').live('mouseenter', function() { 
    $($(this).children('.overstate')).stop().diagonalFade({ 
    time: 350, 
    fadeDirection_x: 'left-right', 
    fadeDirection_y: 'top-bottom', 
    fade: 'out' 
    }); 
}).live('mouseleave', function() { 
    $($(this).children('.overstate')).stop().diagonalFade({ 
    time: 350, 
    fadeDirection_x: 'left-right', 
    fadeDirection_y: 'top-bottom', 
    fade: 'in' 
    }); 
});

HTML

   <div class="person"> 
        <a href="#"> 
         <img src="images/p1h.jpg" /> 
         <span class="name">Lee</span> 
         <span class="overstate"> 
          <img src="images/p1.jpg" />       
         </span> 
        </a> 
       </div><!--end person-->

CSS

.person { float:left; width:180px; margin-bottom:40px; height:236px; margin-right:31px; } 
    .lastperson { margin-right:0; } 
.person a { display:block; width:180px; height:236px; overflow:hidden; position:relative; } 
.person img { position:relative; z-index:2000; } 
.name { display:block; width:170px; height:34px; background:url(../images/team-name.png) no-repeat top left; font-size:18px; color:#FFF; text-align:left; line-height:33px; padding-left:10px; float:left; position:relative; z-index:5000;} 
.overstate { left:0; top:0; position:absolute; z-index:3000; }

我認爲，類似的東西可能會奏效，但一直閃爍，如果我把鼠標移動到幾次

$('.person a').live('mouseenter', function() { 
    if (!$(this).children('.overstate').hasClass('animated')) { 

    $($(this).children('.overstate')).stop().diagonalFade({ 
    time: 450, 
    fadeDirection_x: 'left-right', 
    fadeDirection_y: 'top-bottom', 
    fade: 'out' 
    }); 

    } 
    }).live('mouseleave', function() { 
     $($(this).children('.overstate')).addClass('animated').stop().diagonalFade({ 
     time: 450, 
     fadeDirection_x: 'left-right', 
     fadeDirection_y: 'top-bottom', 
     fade: 'in', 
     complete: function() { $('.person a').children('.overstate').removeClass('animated'); } 
});

}）;

來源

2011-07-30 Nikos

你能發佈你的html嗎？ –

當然，這裏是html！ – Nikos

和CSS請，你的整個代碼 –

恐怕單一解決方案CAND是這樣的：

<script> 
    var inactive = 1; 
    $(document).ready(function(){ 
     $('.person a').live('mouseenter', function(e) { 
      if(inactive==1){ 
       inactive = 0; 
       $($(this).children('.overstate')).stop().diagonalFade({ 
       time: 350, 
       fadeDirection_x: 'left-right', 
       fadeDirection_y: 'top-bottom', 
       fade: 'out', 
       complete:function(){ 
        inactive=1; 
       } 

       }); 
      } 
     }) 
     $('.person a').live('mouseleave', function() { 

       inactive = 0; 
       $($(this).children('.overstate')).stop().diagonalFade({ 
       time: 350, 
       fadeDirection_x: 'left-right', 
       fadeDirection_y: 'top-bottom', 
       fade: 'in', 
       complete: function(){ 
       inactive=1; 

       } 
      }); 

     }); 
}) 

</script>

來源

2011-07-30 12:52:54

對於每個.person a，非活動標誌可以是唯一的嗎？因爲當我從一個人轉到另一個人時並不工作，並且我認爲存在問題 – Nikos

Nikos，您可以使用$（「。person a」）。data（「inactive」，1）或$（「 .person a「）。data（」inactive「）來檢索它，如果你想爲每個人保留一個標誌。 – Dennis

jQuery的提示：$($(this).children('.overstate')).stop()是多餘的。你可以撥打$(this).children('.overstate').stop()。

來源

2011-07-30 13:40:08 Dennis

如果我很快移動鼠標，如何停止對角線漸變？

回答

相關問題