的兩個問題有一個jQuery的切換動畫寬度

所以我目前工作的一個網站至極使用動畫徽標我JQUERY 1.10.2的兩個問題有一個jQuery的切換動畫寬度

使得它是如何工作的：我有一個字母「AD」和只要鼠標移過其中一個字母，全名就會從每個字母的右側滑出。

它就像這樣AD - > A ... D ... - > AcusticDream。

如果你不知道這裏是我的網站上進行現場演示http://acusticdream.tk/TEST/

我的代碼是：

<script type="text/javascript"> 
    $(function() { 
     $(".logo-firstletter").hover(function() { 
      $(".logo-full").animate({width: 'toggle'}, 500); 
     }); 
    }); 
</script>

隨意也看看我的網頁源代碼，看看。

的.logo-firstletter類是自我解釋和.logo全是其他字母。

錯誤＃1 所以BUG是，動畫作品pefectly，但如果你把你的鼠標在右（不通過的第一個字母了）它只是無休止動畫...通過自己嘗試一下，看看。

錯誤＃2 如果您只是將鼠標反覆移動到徽標的字母上，看起來jquery會記住您將鼠標放置多少次，因此它會繼續動畫並生成動畫，直到「count」爲止過度。

任何幫助表示讚賞，如果theres更好的方式來做到這一點，我也會歡迎它！

在此先感謝！

來源

2014-01-08 Dan

這個

可能：

$(".logo-firstletter").hover(function() { 
    if($(".logo-full").is(":animated")) return; //Add this 
    $(".logo-full").animate({width: 'toggle'}, 500); 
});

這樣，我們只有在沒有當前動畫動畫。

編輯：一個新的包裝元素logo-container添加到您的HTML，像這樣：

<div id="logo-container"> 
     <div class="logo-firstletter">A</div> 
     <div class="logo-full">custic</div> 
     <div class="logo-firstletter">D</div> 
     <div class="logo-full">ream</div> 
    </div>

然後做：

$("#logo-container").hover(function() { 
    $(".logo-full").animate({width: 'show'}, 500); 
},function() { 
    $(".logo-full").animate({width: 'hide'}, 500); 
});

希望這有助於。乾杯

來源

2014-01-08 04:01:37

感謝您的回答，是的，它確實有幫助：D但唯一的概率是，它使它保持開放，我仍然希望它關閉，一旦鼠標離開它。 – Dan

我明白了......我編輯了答案，可以再試一次嗎？ –

不幸的是，沒有它dosent和主要問題回來（我的網站上更新的代碼，所以你可以看到） – Dan

的兩個問題有一個jQuery的切換動畫寬度

回答

相關問題