jQuery防止動畫部門跳動

我有動畫選項卡，在懸停在鏈接h2（爲了激發幻燈片動畫），我爲幻燈片效果上/下動畫，如手風琴。jQuery防止動畫部門跳動

<div class="slideBox"> 
    <div class="pane"><img src="images/homepage/sm1.jpg" alt="Room" /></div><!--pane--> 
    <h2 class="drkbluebg" style="border-bottom:7px solid #fff;"> 
     <b>main title</b> 
     <br /> 
     photo caption 
    </h2> 
    <div class="pane" style="display:block;"> 
     <img src="images/homepage/sm2.jpg" alt="Room" /> 
    </div><!--pane--> 
    <h2 class="current greybg"><b>main title</b><br/>photo caption</h2> 
</div><!--slideBox-->

但是，動畫並沒有停止。手風琴效果（滑動效果）持續發射。有沒有辦法解決這個問題？

（順便說一句，我jQuerytools嘗試，到目前爲止，但如果你有其他的解決方案，歡迎您提出）

這是JS代碼：

$(function() { 
    $(".slideBox").tabs(".pane", {tabs: 'h2', effect: 'slide', event: 'mouseover'});  
});

這裏是鏈接對我做了什麼http://www.ixpander.com/simulation/so_issue/

來源

2012-10-11 Grashopper

事件應該是'mouseenter'，但我不確定是否會更好，我從來沒有使用jQuerytools。 –

您應該嘗試在jsFiddle.net上配置jsFiddle。我無法讓你的代碼開始工作。我可能沒有使用正確的庫。在jQuery 1.8.2和jQuery UI 1.9中使用它。但不斷收到錯誤'未捕獲的錯誤：在初始化之前無法在選項卡上調用方法;試圖調用方法'.pane'' – Nope

是的..同樣的錯誤在這裏。我試過jsfiddle但沒有運氣以及..會發佈一個鏈接到我的演示 – Grashopper

嘗試用mouseenter，而不是mouseover所以它只會當鼠標首次進入元素，而不是每一次鼠標移動火

$(".slideBox").tabs(".pane", {tabs: 'h2', effect: 'slide', event: 'mouseenter'});

來源

2012-10-11 19:28:02

我不知道OP是否使用jQuery 1.6.2或更早版本作爲鼠標懸停一般到1.6.2保持執行並且結束了，但是不會再有1.7和更晚的時間。 – Nope

我添加了一個鏈接到我的演示。 mouseenter以某種方式幫助..但問題仍然可見 – Grashopper

我會用類和CSS使用它：

<style> 
.pane{ 
    height:0; 
    overflow:hidden; 
} 

.pane.active{ 
    height:100px; 
} 

</style>

然後，我會用jQuery如下添加類。

<script> 
$(document).ready(function() { 
    $(".slideBox").on('hover', function(){ 
     $(this).prev('.pane').addClass('active'); 
    }); 
} 
</script>

來源

2012-10-11 19:32:43

jQuery防止動畫部門跳動

回答

相關問題