只有製表符沒有滑出時纔會生成動畫

當鼠標懸停在製表符上時，此選項卡滑塊會稍微移動一點。我希望只有當滑塊沒有滑出時纔會發生這種情況。當它熄滅時，不應該在懸停時移動。 See working example here。只有製表符沒有滑出時纔會生成動畫

滑塊獲取類「開放」時，它的滑出，所以我曾嘗試添加以下代碼：

if (!$("#contactContainer").hasClass("open")) { 
    $("#contactContainer").hover(function() { 
     $(this).stop(true, true).animate({ 
     "right": "+=30px" 
    }, 300); }, function() { 
     $(this).stop(true, true).animate({ 
     "right": "-=30px" 
    }, 300); }); 
}

然而，它似乎並沒有任何區別。懸停滑塊時，打開的滑塊仍會移動。我該如何解決？

來源

2013-10-09 Meek

你正在做什麼只是在容器未打開時添加懸停功能 - 因爲這發生在加載時（容器未打開時），懸停功能始終存在。

有幾種方式這一輪，最簡單的是檢查懸停功能裏面，如果容器打開，試試這個：

$("#contactContainer").hover(
    function() { 
     if (!$(this).hasClass("open")) { 
      $(this).stop(true, true).animate({"right": "+=45px"}, 300); 
     } 
    }, function() { 
     if (!$(this).hasClass("open")) { 
      $(this).stop(true, true).animate({"right": "-=45px"}, 300); 
     } 
    } 
);

或者實現閉合類，並在該類直接使用CSS動畫做這個舉動。或者添加/刪除懸停功能作爲打開/關閉功能的一部分。上述解決方案最簡單，但可能會有一些問題取決於您想要的確切功能。

來源

2013-10-09 08:33:10 SpaceDog

是的，你說得對。它現在有效。非常感謝。 – Meek

很好的解決方法，但它有一個問題：選項卡可以恢復到原始點，並且由於點擊後它會一直觸發屏幕邊緣，所以會觸發懸停。請參閱下面的解決方法。 – MassivePenguin

@MassivePenguin（偉大的用戶名，順便說一句）是的 - 我只檢查它很快，並有一個偷偷摸摸的懷疑，我正在離開自己打開這樣的錯誤 - 這是一個很好的解決方法，沒有想到檢查'：動畫' 。我也認爲開放的位置將偏離預期的+45點，因爲鼠標將會發生，但不是鼠標懸停。 – SpaceDog

你必須將if語句移入懸停函數，並且只有當它沒有打開類時才動畫。

您的if check目前只在加載頁面時檢查容器。

來源

2013-10-09 08:34:29 mitchfuku

使用SpaceDog的例子，滑塊關閉，但繼續在屏幕外動畫。這是因爲'open'類會立即被移除，並且當鼠標移動到容器上時，會觸發懸停行爲（將屏幕左側的製表符移動45像素，並防止用戶再次單擊它）。

如果選中了「：動畫」屬性爲好，可以防止懸停行爲從觸發，因此保持標籤屏幕：

$("#contactContainer").hover(
    function() { 
    if (!$(this).hasClass("open") && !$(this).is(":animated")) { 
     $(this).stop(true, true).animate({"right": "+=45px"}, 300); 
    } 
    }, function() { 
     if (!$(this).hasClass("open") && !$(this).is(":animated")) { 
      $(this).stop(true, true).animate({"right": "-=45px"}, 300); 
     } 
    } 
);

來源

2013-10-09 08:50:01 MassivePenguin

您還可以使用使用on-method of jQuery。這將綁定到文檔的mouseenter和mouseleave元素，然後檢查它們是否從與選擇器匹配的元素中冒出來。

$(document).on("mouseenter", "#contactContainer:not(.open)", function() { 
    $(this).stop(true, true).animate({"right": "+=45px"}, 300); 
}).on("mouseleave", "#contactContainer:not(.open)", function() { 
    $(this).stop(true, true).animate({"right": "-=45px"}, 300); 
});

來源

2013-10-09 08:58:28

只有製表符沒有滑出時纔會生成動畫

回答

相關問題