div在jQuery隱藏後閃爍一次（）

我目前正在製作一個小導航菜單。在其中一個下拉菜單中，我需要擴展一個類別。有用。但是，當類別在jQuery.hide（'slow'）的幫助下收回時，我想隱藏的菜單在隱藏動畫的末尾閃爍一次，然後正確隱藏。div在jQuery隱藏後閃爍一次（）

這裏是下面的一些代碼來說明我的問題：

$(document).ready(function(){ 

    var verif = false; 

     $("a").hover(function() { 

     var texte = $(this).text(); 
     var tab = new Array; 
     tab = texte.split("      "); 
      if (tab[0] === "+ Deroule" && verif === false) { 
        $("#submenu").show("slow"); 
        verif = true; 
      } 
      else if (tab[0] === "+ Deroule" && verif === true) { 
         $("#submenu").hide(8000); 

//There, I can clearly see, at the end of the hide animation, the previously opened content blinking once before it hides completely. 

                verif = false; 
       }            
     }); 
});

來源

2012-10-26 Jan

你使用什麼瀏覽器？我在Firefox中有與fadeIn相同的問題：http://stackoverflow.com/questions/12842408/jquery-fadein-is-blinking-in-firefox –

IE9和Chrome。它適用於Chrome。 – Jan

我在IE中發生的恥辱事情 – silviomoreto

沒有看到你的HTML/CSS很難實際釘住問題下來 - 提示提示創建一個小提琴暗示暗示 :) - 但如果我是你，我會做的第一件事就是將.hover()方法更改爲.mouseenter()和.mouseleave()（不是.mousein()和.mouseout() - 這是關於IE支持的另一個對話 - 您可以/應該在jQuery的網站上查看，如果您不是很熟）。

爲什麼這樣做？ .hover()方法實際上只是.mouseenter()/.mouseleave()的簡寫，但由於各種原因（包括它不像兩個完整方法那樣得到廣泛支持），它有時無法正常工作。我不能保證這是這種情況下的問題，但是，特別是因爲這似乎是一個瀏覽器問題，所以最好回到基礎並儘可能多地提供支持。

編輯：

看到您簡化小提琴後，我想我有一個更好的瞭解你的問題是什麼，你想要做什麼。我之前也遇到同樣的問題，根據我的經驗，我可以告訴你，這實際上是一個難以解決的問題。

元素跳轉顯示時/使用.show()，.hide()，滑動隱藏，因爲一旦動畫完成，他們是從流量（在大多數瀏覽器中刪除褪色的方法 - 不鍍鉻 - 顯示/隱藏方法做不會導致元素一直收縮到什麼程度，所以仍然存在不連續性）。以下是我對這個問題的兩種最新解決方案：

在一種情況下，我的任務是在菜單中創建多視圖和多視圖按鈕，這會使元素一次顯示/消失一個。如果您只是試圖在要顯示的集合上調用show/hide，slide或fade方法，它們將同時全部生成動畫，並且在嘗試使它們在回調中運行時會發生同樣的事情。此外，滑動方法不起作用，因爲此動畫將一次在多個項目上調用，從而導致大量開銷並使效果在較慢的瀏覽器中變得不連貫（甚至在FF中有點）。顯示/隱藏方法在一些瀏覽器中有效，因爲它們實際上減小了元素的大小，但是在其他瀏覽器中它們是不連貫的，所以它們出去了（實際上，它們的動畫在所有瀏覽器中都不「完整」，見上文）。因此，我剩下三個選項：使用淡入淡出，動畫或兩者的組合。

解決方案1： 原計劃，因爲它是（用給定的規格）在時間的最佳解決方案，是使用動畫的方法簡單地包裝div（與overflow組滑動至hidden向上或向下，基於列表中的目標元素的偏移量）。這很有效，但是我得到了讓每個元素通過淡入淡出效果連續消失的要求。如果你確實選擇了這種方法，那麼我建議你使用幻燈片方法 - 因爲你不是試圖顯示更多/更少的鏈接，這應該不是問題（是的，我知道這可能聽起來不像那麼查看更多/更少的鏈接將會是一個問題，但是我必須實施它的方式，幻燈片確實導致了問題）。

解決方案2： 利用自身的褪色是一個問題，因爲一切仍在繼續，同時褪色和，即使他們不這樣做，動畫仍然會跳，一旦褪色完成。因此，我需要解決的第一個問題是同時運行的動畫。使用計時器是不可能的，因爲它的開銷很大，所以我編寫了一個函數，它在計算調用之間所需的延遲（根據提供的速度參數以及元素的數量）之後，遞歸地調用集合中每個元素的淡入淡出褪色）。接下來，一旦動畫完成，我仍然必須解決跳躍問題。爲了解決這個問題，我實現了.fadeTo()方法，從而在動畫之後將元素保留在文檔流中。這沒有，但是，導致兩個更多的問題：

在IE瀏覽器不支持.fadeTo()方法（也可能是在9和10 - 我記不清了）
動畫之後，有很多的空的空間，由於沒有從流

爲了解決第一個問題刪除的元素，我添加的IE一個特定瀏覽器的方法，其中每個元素的display屬性設置爲block及其visibility到hidden一旦他們的淡出完成 - 它也做了倒退st在淡入之前開始。

我通過使用前面介紹的動畫方法解決了第二個問題。爲了做到這一點，我必須編寫另一種輔助方法，根據給定的動畫速度和顯示/隱藏元素的數量，計算容器需要滑動的速度。

我知道這是很多的細節，但我希望它可以幫助你確定如何最好地去了解這一點。

讓我知道如果您有任何問題或需要任何澄清，當你前進你的實施。祝你好運！ :)

來源

2012-10-26 14:13:02

小提琴創建（在上面的評論）。我會試試看，謝謝:) – Jan

哈拉斯，同樣的問題... – Jan

這有助於你解決問題嗎？ –

div在jQuery隱藏後閃爍一次（）

回答

相關問題