jquery ui - 將鼠標懸停在父元素上應觸發子元素上的滑動

問題：如果將鼠標移動到外部div內，則懸停在外部div上方會觸發預期的幻燈片方法，但不會一次但多次。我不認爲這是一個冒泡的問題，因爲事件綁定到父元素而不是子元素。我也通過使用stopPropagating（）來防止事件「冒泡」。jquery ui - 將鼠標懸停在父元素上應觸發子元素上的滑動

這裏的HTML標記：

<div class="outer"> 
    <div class="inner">Lorem ipsum dol 
    <div class="clear"></div></div> 
</div><div class="clear"></div>

和CSS：

.outer { 
    float: left; 
    width: 220px; 
    height: 200px; 
    background-color: #06F; 
} 
.inner { 
    float: left; 
    width: 220px; 
    height: 99px; 
    background-color: #0F6; 
    margin-top: 100px; 
}

和jQuery的

$(".outer").hover(function(e){ 
    e.stopPropagation(); 
    //$(".inner").fadeOut("slow"); 
    $(".inner").stop(true, true).hide("slide", {direction: "down"}, "slow"); 
}, function(e){ 
    e.stopPropagation(); 
    //$(".inner").fadeIn("slow"); 
    $(".inner").stop(true, true).show("slide", {direction: "down"}, "slow"); 
});

註釋代碼工作正常的方式。

的jsfiddle鏈接：處理這種http://jsfiddle.net/94hvS/

來源

2012-06-24 Dirk

添加js小提琴鏈接，它應該很容易，因爲您已經隔離了您的問題部分。 – sabithpocker

@sabithpocker完成 – Dirk

一種方法是使用一個全局布爾變量來知道你是否已經滑動對象：

var sliding = false; 
$(".outer").hover(function(e){ 
    e.stopPropagation(); 
    //$(".inner").fadeOut("slow"); 
    if(!sliding) { 
     sliding = true; 
     $(".inner").stop(true, true).hide("slide", {direction: "down"}, "slow", function() { sliding = false; }); 
    } 
}, function(e){ 
    e.stopPropagation(); 
    //$(".inner").fadeIn("slow"); 
    if(!sliding) { 
     sliding = true; 
     $(".inner").stop(true, true).hide("slide", {direction: "down"}, "slow", function() { sliding = false; }); 
    } 
});

我不知道，如果function() { sliding = false; }是在正確的地方，但它必須在動畫完成時調用。

來源

2012-06-24 13:05:12

看起來像覆蓋ui-effects-wrapper（由幻燈片動畫創建）正在重置您的懸停狀態。我能想到的一件事就是簡單地記住像this這樣的變量手動懸停狀態。跛腳，但工作。
不確定是否有更親切的解決方案。

來源

2012-06-24 14:11:30

jquery ui - 將鼠標懸停在父元素上應觸發子元素上的滑動

回答

相關問題