JQuery淡入淡出淡出問題

我有下面的代碼，我用於淡入淡出和淡出狀態懸停狀態。JQuery淡入淡出淡出問題

$(function(){ 
    $("#bottomIco ul li a").hover(function(){ 
     $(this).children("#gray").fadeOut("100",function(){ 
      $(this).parent().children("#actual").fadeIn("100"); 
     }); 
    },function(){ 
     $(this).children("#actual").fadeOut("100",function(){ 
      $(this).parent().children("#gray").fadeIn("100"); 
     }); 
    }); 
});

它的工作原理，但是當我在#gray中徘徊有空白，然後#actual div來了。

我需要使它平滑，即當我懸停時不需要空白。

來源

2012-05-11 Pus

如果可能的話，示例標記將有很大幫助 – Dhiraj

然後請提供一個jsfiddle示例和css以及 –

你得到「空白」的原因，是因爲你在的回調中淡出#actual的淡出。這意味着您正在等待#gray完全淡出，然後淡入#actual。

嘗試同時淡出和淡入淡出。

$(this).children("#gray").fadeOut(100); 
$(this).children("#actual").fadeIn(100);

由於兩個變淡異步運行，他們將在大約同一時間，一毫秒或兩個滯後，也許執行。

這樣做時唯一需要考慮的就是它們都會同時呈現在屏幕上，所以如果你想要淡入淡出的過渡，你需要考慮定位。

#bottomIco ul li a { position: relative; } 

    #bottomIco ul li a.fade #gray, 
    #bottomIco ul li a.fade #actual { 
     position: absolute; 
     top: 0; 
     left: 0; 
    }

然後，只需應用和刪除，當你之間衰落fade類。

var $this = $(this); 
$this.addClass("fade"); 
$this.children("#gray").fadeOut(100); 
$this.children("#actual").fadeIn(100, function() { 
    $this.removeClass("fade"); 
});

來源

2012-05-11 04:48:04 peirix

謝謝請順便說一句，它不適合我。 – Pus

@PushparajJoshi什麼不工作？你可以說得更詳細點嗎？ – peirix

我在兩張圖像之間閃爍。我會告訴你在jsfiddle – Pus

我認爲使用CSS3會是一個更優雅的解決方案。你可以發佈一個jsfiddle，所以我可以把它放在一起嗎？

來源

2012-05-11 06:16:52

http://jsfiddle.net/yyzr4/2/你可以在這裏看到 – Pus

這裏是一個CSS唯一的解決方案：http://jsfiddle.net/yyzr4/2/請讓我知道如果我已經理解了這個問題！ –

JQuery淡入淡出淡出問題

回答

相關問題