fadeIn作为fadeOut之后的回调函数没有按预期工作

fadeIn as callback function after fadeOut doenst work as expected

本文关键字：工作 函数 fadeOut 作为 之后 回调 fadeIn      更新时间：2023-09-26

在我的HTML中，一个#navInnerMapR和一个#navInnerMapL包含在div#navTwo中。

以下代码在一个函数中。调用时，我需要函数fadeOutdiv#navTwo中的任何可见链接，暂停片刻，然后在#navInnerMapR中fadeIn。

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

代码会淡出链接，但不会淡入任何内容。我原以为只有在fadeOut完成后才会开始延迟，但将延迟值更改为1000有时会起作用，但它非常有缺陷。感谢

UPDATE这里有一个小提琴，显示隐藏的链接在可见链接被隐藏之前开始显示：http://jsfiddle.net/jamesbrighton/d9QKr/5/

抱歉，我的问题没有包括我需要实现的全部细节。我简化了它，因为我认为我只是有一些sytax问题，可以很容易地解决。

div#navTwo实际上包含3个链接。在任何点（除了动画运行之前的延迟），只有一个链接可见。我需要能够调用一个函数，该函数将隐藏正在显示的其他2个链接中的任何一个，然后显示#navInnerMapR。

不同的事件将调用此函数，因此两个没有#navInnerMapR的链接中的任何一个都可能可见。感谢

更新我认为这个小提琴说明了这个问题。我创建了两个div.nav来说明不同的状态。我用内联CSS在每个链接中隐藏了不同的链接。JavaScript将重复显示和隐藏我的div中的链接，因此同一个div在不同的时间看起来像每个示例。

我创建了两个触发器来说明不同的事件需要调用该函数。当你点击一个触发器时，你可以看到两个例子中的问题。在显示a.one之前，可见的div不会被隐藏。谢谢你的耐心！

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

有趣的是，如果我更改$（'.nav a.one'）.fadeIn（1000）；警报会多次触发！不知道为什么会这样！

编辑：根据您的以下评论更新答案，

是的，这是我需要的，但我不确定它是否适用于我的实际情况页很抱歉我的问题不够详细。代码我举的例子被简化了。在实际页面中，有3个链接在div#navTwo中，任何时候都只能看到其中一个。我需要能够调用一个隐藏任何链接并显示具体的一个，但div#navTwo中的其他2个链接中的任何一个都可能是看得见的感谢

演示

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);
    });
}

我想我明白你需要什么。试试下面的演示，让我知道如果这是你想要的，

演示

$('#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);
    });
}

正如您所说，您需要函数fadeOutdiv#navTwo中的任何可见链接，暂停片刻，然后在#navInnerMapR中fadeI（不是其他链接，只有#navInerMapR）。

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

小提琴在这儿。

相关文章：