麻煩與jQuery動畫的jsfiddle鏈接 - > jsfiddle.net/QYry5

我已經寫了一些代碼，是工作的罰款，但這個動畫作品只是第一次，然後它只是加載和顯示（不包括動畫）麻煩與jQuery動畫的jsfiddle鏈接 - > jsfiddle.net/QYry5

$(document).ready(function() { 
    $("li.moreInfo").hide(); 

    $("a").mouseover(function() { 
     var t = $(this); 
     t.parent().next().eq(0).show(); 
     t.parent().next().animate({ width: '300px' }, 2000, 'easeOutBounce'); 
    }); 

    $("a").mouseleave(function() { 
     var t = $(this); 
     $(this).parent().next().hide(500); 
    }); 
});

HTML是在這裏：

<div style="position:relative;"> 
    <ul> 
     <li><a href="#">Section 1</a></li> 
     <li class="moreInfo">More Info</li> 
     <li><a href="#">Section 2</a></li> 
     <li class="moreInfo">Second More Info</li> 
     <li><a href="#">Section 3</a></li> 
     <li class="moreInfo">More Info</li> 
     <li><a href="#">Section 4</a></li> 
     <li class="moreInfo">Second More Info</li> 
    </ul> 
</div>

在產品鼠標懸停，它給EFF第一次使用緩動（easeOutBounce &緩慢移動），但當我第二次重複相同時，它既不顯示緩慢移動也不緩動或反彈效果。它只是加載並且速度非常快。我認爲這可能是緩存，但我不知道如何避免它。

你們能幫我解決這個問題嗎？

更新：我已經發布了HTML代碼還的jsfiddle鏈接 - >http://jsfiddle.net/QYry5

來源

2012-12-11 jasper

請發表的jsfiddle（http://jsfiddle.net/），所以我們可以看到在行動代碼。 – dnagirl

它第一次動畫到300像素。下一次它已經在300像素，所以沒有任何動畫。 – JJJ

@Neurofluxation - 這是一段時間以來最愚蠢的評論。它只是提供標記*和*代碼或jsfiddle的好習慣。 *猜測*解決這個問題的方法，但更多的時候，沒有工作（或破碎）的例子，它不可能正確回答。 **編輯**，現在你已經刪除了你的猜測答案（以及評論告訴OP不要發佈jsfiddle：|） - 毫無疑問，因爲你不知道它是否能解決問題。 – Jamiec

我在JS改變& CSS：

JS：

t.parent().next().eq(0).show(2000,'easeOutBounce');

CSS：

.moreInfo 
     { 
      display:block; 
      background-color: #eee; 
      border: 1px solid Yellow; 
      width:300px;     
     }

這裏是更新的jsFiddle：

http://jsfiddle.net/QYry5/1/

問題只有寬度。第一次動畫之後，它獲得了300px的寬度，所以第二次沒有更多的動畫範圍。如果你只想在寬度上播放，你應該重置mouseleave事件的寬度。

在鼠標懸停：

t.parent().next().animate({ width: '+=300px' }, 2000, 'easeOutBounce');

上mouseleve

：

t.parent().next().animate({ width: '-=300px' }, 2000, 'easeOutBounce',function(){$(this).hide()});

這裏是此更新的jsfiddle：

http://jsfiddle.net/QYry5/2/

來源

2012-12-11 13:04:55 Vipul

我創建了JFiddle - 你可以在http://jsfiddle.net/QYry5/ – jasper

@jasper看到它：我已經編輯了我的答案。希望這會有所幫助。 – Vipul

非常感謝Vipul！它解決了我的問題。 – jasper

麻煩與jQuery動畫的jsfiddle鏈接 - > jsfiddle.net/QYry5

回答

相關問題