如何反转这个简单的 jQuery fadeIn 效果？

Question

因此，当您单击按钮 (id="enter") 时，此脚本会创建缓动 swift 效果，而我想要的是，当您再次单击它时，它会反转效果回到起点。此外，另一种解决方案可以使用 2 个按钮，这样一个可以执行第一部分，另一个可以反转操作。这是代码：

jQuery('#enter').click(function() {
    $('#slide2').fadeIn(1000, 'linear', function(){
        $('#slide3').fadeIn(1000, 'linear');
    });
});

共有三张图片：slide1、slide2、slide3。我实际上在这里找到了这段代码：http://jsfiddle.net/e6hUr/1/ 它应该是这样的，但我现在只需要反转。

Answer 1

这里你有不止一张幻灯片，所以 fadeToggle 不能给你精确的反转很好的下面的代码可以给你 fadeIn 效果的精确反转

var forward = true;
$('#enter').click(function() {
  if(forward == true){
    $('#slide2').fadeIn(1000, 'linear', function(){
      $('#slide3').fadeIn(1000, 'linear');
    });
    forward = false;
  }else{
    $('#slide3').fadeOut(1000, 'linear', function(){
      $('#slide2').fadeOut(1000, 'linear');
    });
    forward = true;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slides">
    <li id="slide1" style="width: 100%; float: left; margin-right: -100%; display: list-item; ">
    <img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/drawing.jpg">
    </li>
    <li id="slide2" style="width: 100%; float: left; margin-right: -100%; display: none; ">
    <img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-day-time.jpg">
    </li>
    <li id="slide3" style="width: 100%; float: left; margin-right: -100%; display: none; ">
    <img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-night-time.jpg">
    </li>
</ul>

<button id="enter" type="button">Click Me!</button>

Answer 2

使用这个：

$('#enter').click(function() {
    $('#slide2').fadeToggle(1000, 'linear', function(){
        $('#slide3').fadeToggle(1000, 'linear');
    });
});

只需切换淡入淡出效果即可。

Answer 3

有两种方法可以使用 fadIn、fadeOut 和 fadeToogle 实现反向效果更改 jquery 中的幻灯片顺序，请参见下面的代码。为了识别淡入淡出效果，我们在按钮中管理数据淡入淡出属性。

$('#enter').click(function() {
  var fade_type = $(this).data('fade');

  if (fade_type == "in") {
    $('#slide2').fadeToggle(1000, 'linear', function() {
      $('#slide3').fadeToggle(1000, 'linear');
    });
    $(this).data('fade', 'out');
  } else {
    $('#slide3').fadeToggle(1000, 'linear', function() {
      $('#slide2').fadeToggle(1000, 'linear');
    });
    $(this).data('fade', 'in');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slides">
  <li id="slide1" style="width: 100%; float: left; margin-right: -100%; display: list-item; ">
    <img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/drawing.jpg">
  </li>
  <li id="slide2" style="width: 100%; float: left; margin-right: -100%; display: none; ">
    <img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-day-time.jpg">
  </li>
  <li id="slide3" style="width: 100%; float: left; margin-right: -100%; display: none; ">
    <img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-night-time.jpg">

  </li>
</ul>

<button id="enter" type="button" data-fade="in">Click Me!</button>

Answer 4

您应该使用 CSS 转换来处理它，在 jQuery 中，您只需切换 class:

-jsFiddle-

$('#enter').click(function() {
  $('#slide2, #slide3').toggleClass('fadeIn');
});

#enter {
  position: relative;
  z-index: 9;
}
#slide2, #slide3 {
  opacity: 0;  
  transition: opacity 1s linear;
}

#slide2.fadeIn, #slide3.fadeIn {
  opacity: 1;
}
#slide2:not(.fadeIn), #slide3.fadeIn
{
  transition-delay: 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slides">
  <li id="slide1" style="width: 100%; float: left; margin-right: -100%; display: list-item; ">
    <img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/drawing.jpg">
  </li>
  <li id="slide2" style="width: 100%; float: left; margin-right: -100%;">
    <img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-day-time.jpg">
  </li>
  <li id="slide3" style="width: 100%; float: left; margin-right: -100%;">
    <img alt="Panoramic view from the window of one of the penthouses" src="http://tritonpenthouses.uwpistol.net/images/bg/cgi-night-time.jpg">
  </li>
</ul>

<button id="enter" type="button">Click Me!</button>

如何反转这个简单的 jQuery fadeIn 效果？

How can I reverse this simple jQuery fadeIn effect?

javascript

jquery

reverse

fadein

-jsFiddle-