Question

因此，当您单击按钮（id =＆＃34;输入＆＃34;）时，此脚本会创建一个缓动迅速的效果，而我想要的是当您再次单击它时它会反转效果并返回到了开头。另外，另一个解决方案可以是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中查看下面的代码。为了识别淡入淡出效果，我们在按钮中管理数据淡入淡出属性。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您应该使用CSS转换处理它，在jQuery中，您只需切换一个类：

-jsFiddle-

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我怎样才能扭转这个简单的jQuery淡入效果呢？

4 个答案:

-jsFiddle-