Question

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

我在调用jquery的fadeOut完整功能方面遇到了问题。在调用fadeOut之前，我希望内容完全fadeIn。
如果已经显示了相应的内容，我也不希望内容为fadeOut和fadeIn。例如，如果正在显示选项1的内容，并且您再次单击选项1，则它不应淡出并重新登录，它应保持不变。

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

＆＃13;

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

＆＃13;

.cheese{
  height:200px;
  width:300px;
  background:blue;
}
.cheese div{
  color:white;background:red;
}
.box{
  height:300px;
  width:500px;
  

}
.box .content{
  display:none;
}

＆＃13;

<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>

＆＃13;

编辑1：我相信我解决了在它消失之前没有正确淡出的问题。我使用了promise（）并完成了，我需要这样做才能让它工作。 ..小提琴：https://jsfiddle.net/jzhang172/6kpyhpbh/10/

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

Answer 1

我已将$(document).ready(function() { $('form#shortfilm').submit(function(e) { e.preventDefault(); var form = $(this); var foo = []; $('#category :selected').each(function(i, selected){ foo[i] = $(selected).text(); }); }); });函数用于淡出功能，以便不是每个孩子都淡出，因此显示问题。

.not(":hidden")

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

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

请参阅更新后的fiddle。

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

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

Answer 4

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

小提琴：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();
   }
 });

fadeIn仅在未显示且fadeOut完成时

4 个答案: