fadeIn仅在未显示且fadeOut完成时显示

fadeIn only if not shown and fadeOut complete

本文关键字：显示 完成时 fadeOut fadeIn      更新时间：2023-09-26

请检查Edit，因为它显示了我迄今为止取得的进展

我在调用jquery的fadeOut完整函数时遇到问题。在调用fadeIn之前，我希望内容完全转到fadeOut
如果已经显示了fadeOut和fadeIn各自的内容，我也不希望将内容发送给它们。例如，如果正在显示选项1的内容，并且您再次单击选项1，则它不应淡出并返回，应保持不变。

https://jsfiddle.net/jzhang172/6kpyhpbh/7/

$('.option1').click(function(){
$('.box').children().fadeOut(1000,function(){
$('.one').fadeIn();
});
});
$('.option2').click(function(){
$('.box').children().fadeOut(1000,function(){
$('.two').fadeIn();
});
});
$('.option3').click(function(){
$('.box').children().fadeOut(1000,function(){
$('.three').fadeIn();
});
});
.cheese{
  height:200px;
  width:300px;
  background:blue;
}
.cheese div{
  color:white;background:red;
}
.box{
  height:300px;
  width:500px;
  
}
.box .content{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cheese">
<div class="option1">Option 1</div>
<div class="option2">Option 2</div>
<div class="option3">Option 3</div>
</div>
<div class="box">
  <div class="content one">Content One</div>
  <div class="content two">Content Two</div>
  <div class="content three">Content Three</div>
  
</div>

第1版：我相信我已经解决了在淡出之前无法正常淡出的问题。我使用了promise（）并完成了，但我需要这样做才能让它工作。。。Fiddle here：https://jsfiddle.net/jzhang172/6kpyhpbh/10/

第2版：所以，我有两个工作要求，但有一个问题。。。如果你连续快速点击两个选项，两个选项都显示内容，我只想显示最新的一个。https://jsfiddle.net/jzhang172/6kpyhpbh/16/

我使用了.not(":hidden")函数来实现淡出功能，这样并不是每个子项都会淡出，从而导致显示问题。

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

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

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

请参阅更新后的小提琴。

$('.option1').click(function(){
$('.box').children().hide(function(){
$('.one').show();
});
});
$('.option2').click(function(){
$('.box').children().hide(function(){
$('.two').show();
});
});
$('.option3').click(function(){
$('.box').children().hide(function(){
$('.three').show();
});
});
.cheese{
  height:200px;
  width:300px;
  background:blue;
}
.cheese div{
  color:white;background:red;
}
.box{
  height:300px;
  width:500px;
  transition-duration:0s;
}
*{transition-duration:0s;}
.box .content{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cheese">
<div class="option1">Option 1</div>
<div class="option2">Option 2</div>
<div class="option3">Option 3</div>
</div>
<div class="box">
  <div class="content one">Content One</div>
  <div class="content two">Content Two</div>
  <div class="content three">Content Three</div>
  
</div>

在淡入或淡出前使用可见性检查：

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

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

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

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

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类

Fiddle：https://jsfiddle.net/6kpyhpbh/17/

$('.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();
   }
 });
相关文章：