fadeIn fadeOut回調函數按預期工作

在我的HTML＃navInnerMapR和＃navInnerMapL包含在div＃navTwo中。fadeIn fadeOut回調函數按預期工作

以下代碼在函數中。當被調用時，我需要使用函數淡出div＃navTwo中的任何可見鏈接，暫停一會兒，然後淡入＃navInnerMapR。

$('div#navTwo a').fadeOut(200, function() { 
    $('a#navInnerMapR').delay(100).fadeIn(200); 
});

代碼淡出了聯繫，但不褪色的東西。我認爲他們推遲一旦淡出結束只會啓動，但延遲值更改爲1000使得它有時會工作，但它非常的馬車。由於

UPDATE此處給出了一個隱藏的鏈接開始看到隱藏之前顯示一個小提琴：http://jsfiddle.net/jamesbrighton/d9QKr/5/

UPDATE道歉，我的問題犯規包括什麼，我需要實現的全部細節。我簡化它，因爲我認爲我只是有一些可以很容易修復的sytax issus。

div＃navTwo實際上包含3個鏈接。在任何時候（除了動畫運行之前的延遲），只有1個鏈接可見。我需要能夠調用一個函數來隱藏正在顯示的其他兩個鏈接，然後顯示一個＃navInnerMapR。

不同的事件會調用這個函數，所以2個不是＃navInnerMapR的鏈接都可以看到。謝謝

更新我認爲這個小提琴說明了這個問題。我創建了2個div.nav來說明不同的狀態。我隱藏了不同的鏈接和每個鏈接的內聯CSS。 JavaScript會反覆顯示和隱藏我的div中的鏈接，因此同一個div在不同時間會看起來像每個示例。

我創建了2個觸發器來說明不同的事件需要調用該函數。當你點擊一個觸發器時，你可以看到這兩個例子的問題。在顯示a.one之前，可見div不會隱藏。謝謝你的耐心！

http://jsfiddle.net/jamesbrighton/dYvMS/24/

有趣的觀點，如果我改變$（ '導航a.one。'）淡入（1000）。到警報，警報會多次觸發！不知道爲什麼會這樣！

來源

2012-03-21 Evans

[Works for me]（http://jsfiddle.net/skram/uCZjH/1/）。順便說一句，你不需要'延遲'，因爲回調將在'fadeOut'動畫結束後被調用一次。 – 2012-03-21 16:01:19

看起來隱藏的鏈接開始顯示之前隱藏的可見之一http://jsfiddle.net/jamesbrighton/d9QKr/ – Evans 2012-03-21 16:29:57

你想要達到什麼？你想如何工作？例如：點擊Right鏈接時會發生什麼？嘗試http://jsfiddle.net/skram/d9QKr/6/ < - 這是你想要的東西嗎？ – 2012-03-21 16:40:34

編輯：根據您下面的評論更新的答案，

是這個工程，我需要，但林不知道它會爲我的實際頁工作。對不起，我的問題不夠詳細。我給出的代碼簡化了。在實際的頁面中，它們是在div＃navTwo內的3個鏈接，在任何時候只有其中一個可見。 I 需要能夠調用隱藏任何鏈接的功能並顯示特定的一個，但div＃navTwo中的其他兩個鏈接中的任一個可能是可見。由於

DEMO

HTML：添加的類裏面navTwo各個環節

<div id="navTwo"> 
    <a href="#" id="navInnerMapR" class="links">Right</a> 
    <a href="#" id="navInnerMapL" class="links">Left</a> 
    <a href="#" id="navInnerMapM" class="links">Middle</a> 
    <a href="#" id="navInnerMapU" class="links">Upper</a> 
    <a href="#" id="navInnerMapLW" class="links">Lower</a> 
</div>

JS：

$('.links').click(function() { 
     showHide($(this)); 
}); 

function showHide($this) {  
    $this.fadeOut(1000, function() { 
     $('#navTwo a').not($this).delay(1000).fadeIn(1000); 
    }); 
}

我想我明白你的需要。試試下面的演示，讓我知道，如果這是你想要的，

DEMO

$('#navInnerMapR').click(function() { 
     runMeR($(this)); 
}); 
$('#navInnerMapL').click(function() { 
     runMeL($(this)); 
}); 

function runMeR($this) {  
    $this.fadeOut(1000, function() { 
     $('a#navInnerMapL').delay(1000).fadeIn(1000); 
    }); 
} 
function runMeL($this) {  
    $this.fadeOut(1000, function() { 
     $('a#navInnerMapR').delay(1000).fadeIn(1000); 
    }); 
}

來源

2012-03-21 16:53:33

是的，這是我需要的，但我不知道它會適用於我的實際頁面。對不起，我的問題不夠詳細。我給出的代碼示例簡化了。在實際頁面中，它們是在div＃navTwo內的3個鏈接，在任何時候，只有其中一個可見。我需要能夠調用隱藏任何鏈接並顯示特定鏈接的函數，但div＃navTwo中的其他2個鏈接中的任何一個都可能是可見的。謝謝 – Evans 2012-03-21 17:06:13

如果我添加第三個鏈接到你的小提琴它不隱藏 – Evans 2012-03-21 17:39:24

我用新的小提琴更新了我的問題。 – Evans 2012-03-21 17:45:16

正如你所說，你需要的功能淡出在DIV＃navTwo任何可見的鏈接，停頓了片刻，然後淡入＃navInnerMapR（不是其他鏈接，只有＃navInnerMapR）。

$('#navTwo a').click(function(e) { 
    $(this).parent().children().each(function(i){ 
     $(this).fadeOut('slow', function(){ 
      $('a#navInnerMapR').delay(1000).fadeIn(1000); 
     }); 
    }); 
});

小提琴是here。

來源

2012-03-21 17:06:32

對不起，我認爲我的問題足夠詳細，可以解釋我實際需要的內容。我更新了它。謝謝 – Evans 2012-03-21 17:12:48

fadeIn fadeOut回調函數按預期工作

回答

相關問題