2011-04-29 411 views
0

我試圖達到一種效果,當你將鼠標懸停在圖像上時,它會放大,變暗,並且另一個圖像滑落。我已經成功地實現了這個效果,但是有一個小問題。這裏是我的代碼: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/

+0

太多的stop()???? – JCHASE11 2011-04-29 03:28:45

+2

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

+0

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

回答

0

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

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

1

嘗試改變了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)