Javascript 仅在未显示和淡出完成时淡出

请检查编辑，因为它显示了我到目前为止取得的进展

我在调用jquery的

fadeOut

complete函数时遇到问题。我希望内容在调用

fadeIn

之前完全淡出
而且，如果已经显示了相应的内容，我也不希望该内容变成

fadeOut

和

fadeIn

。例如，如果正在显示选项1的内容，并且您再次单击选项1，则该内容不应淡出，而应保持不变

$（'.option1'）。单击（函数（）{
$（'.box'）.children（）.fadeOut（1000，function（））{
$（'.one'）.fadeIn（）；
});
});
$（'.option2'）。单击（函数（）{
$（'.box'）.children（）.fadeOut（1000，function（））{
$（'.two'）.fadeIn（）；
});
});
$（'.option3'）。单击（函数（）{
$（'.box'）.children（）.fadeOut（1000，function（））{
$（'.three'）.fadeIn（）；
});
});
.cheese{
高度：200px；
宽度：300px；
背景：蓝色；
}
.奶酪部{
颜色：白色；背景：红色；
}
.盒子{
高度：300px；
宽度：500px；
}
.box.content{
显示：无；
}

选择1
选择2
选择3
内容一
内容二
内容三

$（'.option1'）。单击（函数（）{
$（'.box'）.children（）.hide（函数（）{
$（'.one'）.show（）；
});
});
$（'.option2'）。单击（函数（）{
$（'.box'）.children（）.hide（函数（）{
$（'.two'）.show（）；
});
});
$（'.option3'）。单击（函数（）{
$（'.box'）.children（）.hide（函数（）{
$（'.three'）.show（）；
});
});
.cheese{
高度：200px；
宽度：300px；
背景：蓝色；
}
.奶酪部{
颜色：白色；背景：红色；
}
.盒子{
高度：300px；
宽度：500px；
转换持续时间：0s；
}
*{转换持续时间：0s；}
.box.content{
显示：无；
}

选择1
选择2
选择3
内容一
内容二
内容三
我使用了
.not（“：hidden”）
功能来实现淡出功能，因此并非每个孩子都会淡出，从而导致显示问题

$('.box').children().not(":hidden").fadeOut(1000,function(){
// code
});

此外，您还需要在开头显示至少一个元素，这是我为索引0所做的

$('.box').children().eq(0).show();

请参阅更新的。在淡入或淡出之前，请使用可见性检查：

If ($(.yourElement).is(":visible") )     
{
      //Do your fade out
}

可以在动画期间禁用/启用元素

$(.yourElement).prop ('disabled', true);
$(.yourElement).fadeIn (1000, function () { 
    $(this).prop ('disabled', false);
});

或者使用promise在该元素的所有动画之后执行动画

element.promise ().done ( function () {
    //Do something on completion of all animations
});

如果要在元素已完成动画设置的情况下触发它，请执行以下操作：

element.promise ().always ( function () {
    //Do something on completion of all animations
});

您可以使用
data dir
html5新功能访问不同的
.content
类

小提琴：

出于好奇，为什么盒子作为一个整体会褪色？你能澄清一下吗？这不适合我。它只针对“盒子”中的儿童元素，没有按我的要求做，对不起。它仍然在滚动，而不是等待它完全消失，如果它的内容已经显示，它也会消失。我也做了类似的事情，我想我实际上做了与你相反的事情：，但这里还有一个问题，如果你连续快速点击两个选项，它们都会出现，我只想最新的一个出现。我已经考虑编辑2和更新我的小提琴。请参考以上链接。在淡入淡出动画之前使用了
stop（）
。非常好，我相信这正是我想要的，我并不真正理解eq（0）部分，但我可能会在明天睡觉后进一步研究它。谢谢永远欢迎你。您也可以参考此链接了解
eq
-
$('.box').children('div').hide();

 $('.cheese div').on('click',function(){
   var direction = $(this).data('dir')

   if(direction === 'option1'){
    $('.box').children('.contentOne').fadeIn().siblings('div').fadeOut();
   }
   if(direction === 'option2'){
    $('.box').children('.contentTwo').fadeIn().siblings('div').fadeOut();
   }
   if(direction === 'option3'){
    $('.box').children('.contentThree').fadeIn().siblings('div').fadeOut();
   }
 });