如何扭转这种简单的jQuery淡出效果?

How can I reverse this simple jQuery fadeIn effect?

本文关键字：淡出 jQuery 何扭转 简单      更新时间：2023-09-26

因此，当您单击按钮(id="enter")时，此脚本创建了一个舒缓的快速效果，我想要的是，当您再次单击它时，它将逆转效果并返回到开始。另外，另一个解决方案是使用两个按钮，这样一个按钮可以执行第一部分，另一个按钮可以反向操作。下面是代码:

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

有三个图像:slide1, slide2和slide3。我实际上在这里找到了这段代码:http://jsfiddle.net/e6hUr/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>

有两种方法可以使用fadIn,fadeOut和fadeToogle来实现在jquery中改变幻灯片顺序的反向效果，见下面的代码。为了识别渐变效果，我们在按钮中管理data-fade属性。

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

你应该使用CSS过渡来处理它，在jQuery中，你只需要切换一个类:

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

使用

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

相关文章：