jquery懸停效果消失

我試圖達到一種效果，當你將鼠標懸停在圖像上時，它會放大，變暗，並且另一個圖像滑落。我已經成功地實現了這個效果，但是有一個小問題。這裏是我的代碼：jquery懸停效果消失

HTML

<div class="viewPort"> 
<a href="#"><img src="<?php echo bloginfo('template_url'); ?>/images/penguin.jpg" alt="penguin"> 
<span class="dark"></span><span class="slide"></span></a> 
</div>

CSS

.viewPort{float:left; position:relative; border:8px solid #60B1D0; height:300px; width:300px; overflow:hidden;} 
.viewPort a{display:block;} 
.viewPort img{ position:relative; top:-20px; left:-20px; height:330px;} 
.viewPort span.dark{background:url(images/trans.png) repeat; width:100%; height:100%; position:absolute; top:0; left:0; z-index:10; display:none;} 
.viewPort span.slide{top:-130px; left:84px; position:absolute; z-index:100; width:130px; height:130px; background:url(images/badge.png) no-repeat;}

jQuery的

$(".viewPort a").hover(function(){ 

      $(this).find('img').stop().animate({ 
       height: '300', left: '0', top: '0', width: '300' 
      }, 250); 

      $('span.dark').fadeIn(600); 
      $('span.slide').stop().animate({ 
        top: '80' 
        }, 600); 

     }, function(){ 
      $('span.slide').stop().animate({ 
        top: '-130' 
       }, 400); 
      $('span.dark').stop().fadeOut(400); 

      $('.viewPort img').stop().animate({ 
       height: '330', left: '-20', top: '-20', width: '330' 
      }, 250); 
     });

這個偉大的工程;但是，如果您幾次在圖像上來回移動，則<span class="dark"></span>似乎不受影響。我看着我的螢火蟲控制檯，懸停的不透明度正在改變;然而，在視覺上，你並沒有看到它變暗。任何想法爲什麼發生這種情況？它在正常盤旋時效果很好，但如果稍微玩一下，黑暗效果就會消失。

http://jsfiddle.net/7zQFf/

來源

2011-04-29 JCHASE11

太多的stop（）???? – JCHASE11 2011-04-29 03:28:45

幫你一個忙，並且http://jsfiddle.net/它。 – 2011-04-29 03:29:20

這裏是：http://jsfiddle.net/7zQFf/ – JCHASE11 2011-04-29 03:38:53

您應該通過jumpToEnd說法爲真（所以動畫將很快完成），以便在黑暗跨度上呼叫停止時工作。這裏是演示：

http://jsfiddle.net/7zQFf/4/

來源

2011-04-29 03:56:16 suhair

嘗試改變了jQuery這樣的：

$(".viewPort a").hover(function(){ 

     $(this).find('img').stop().animate({ 
      height: '300', left: '0', top: '0', width: '300' 
     }, 250); 

     $('span.dark').stop().fadeTo(600, 1); // .stop().fadeTo() 
     $('span.slide').stop().animate({ 
       top: '80' 
       }, 600); 

    }, function(){ 
     $('span.slide').stop().animate({ 
       top: '-130' 
      }, 400); 
     $('span.dark').stop().fadeTo(400, 0); // .stop().fadeTo() 

     $('.viewPort img').stop().animate({ 
      height: '330', left: '-20', top: '-20', width: '330' 
     }, 250); 
    });

爲我工作在的jsfiddle：http://jsfiddle.net/bFUSX/（FF4）

來源

2011-04-29 03:47:40

jquery懸停效果消失

回答

相關問題