Question

我的HTML文件中有一个div，用作按钮。

当我单击该按钮时，我希望当前图像消失而另一幅图像出现在其位置。这是我的工作。

但是，当我单击相同的按钮时，我希望当前图像淡出并且第三张图像淡入。当我尝试执行此操作时，我所有的图像同时淡入并同时淡出，我不能彼此区分。

一旦单击同一按钮以淡出图像并淡入另一图像，如何使用同一按钮？

<!DOCTYPE html>
<html lang="en">
  <head>
  <body>
    <div class="gameboy-button"></div>
  </body>
<html>

jQuery：

$(document).ready(function(){

  //This image automatically fades in when my page loads which I want...
  $('.gb1').fadeIn(3000).delay(500);

  //When you click this button gb1 fades out and gb2 fades in which is fine....
  $('.gameboy-button').click(function(){
    $('.gb1').fadeOut(500);
    $('.gb2').fadeIn(3000);
  });

  //When you click this same button again I want gb2 to fade out and gb3 to fade in
  $('.gameboy-button').click(function(){
    $('.gb2').fadeOut(500);
    $('.gb3').fadeIn(3000);
  });

});

Answer 1

您只需要循环播放图像...

但是请注意淡入延迟...如果单击得太快，可能会导致许多并发动画。这就是为什么在这里使用.stop()来停止当前动画队列的原因。

然后，如果您有3张图片，单击4次后会发生什么？
你要知道有多少张图片...
然后，remainder operator将图像编号保持在范围内。

最后一件事...您必须使用淡出的上一个图像的回调，以避免同时显示两个图像。

$(document).ready(function(){

  //This image automatically fades in when my page loads which I want...
  $(".gb1").fadeIn(3000);
  
  var actualImg = 1;
  var ImgCount = $("[class^='gb']").length;
  
  //When you click this button gb1 fades out and gb2 fades in which is fine....
  $('.gameboy-button').click(function(){
    
    nextImg = (actualImg%ImgCount)+1;
    
    console.log(nextImg);
    
    $("[class^='gb']").stop().fadeOut(500, function(){
      $(".gb"+nextImg).stop().fadeIn(3000);
    });

    actualImg++;
  });

});

.gameboy-button{
  border:1px solid black;
  border-radius:6px;
  width:8em;
  text-align:center;
  padding:0.3em;
}
[class^='gb']{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="gameboy-button">Gameboy button</div>

<img class="gb1" src="http://via.placeholder.com/350x150?text=gb1">
<img class="gb2" src="http://via.placeholder.com/350x150?text=gb2">
<img class="gb3" src="http://via.placeholder.com/350x150?text=gb3">

Answer 2

问题是您的代码向该对象的单击处理程序添加了两个事件。您所有的代码都是在按下按钮之前执行的，因此每次按下按钮都会发生这两种情况。要解决此问题，您可以在点击按钮后更改点击事件：

$('.gameboy-button').click(function(){
    $('.gb1').fadeToggle(500);
    $('.gb2').fadeToggle(3000);
    // during the first click event, un-bind this event
    $(this).unbind('click');
    // then bind a new click event for the next time you click it
    $(this).click(function(){
        $('.gb2').fadeOut(500);
        $('.gb3').fadeIn(3000);
    });
});

<html>
  <head>
    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
    <style>
      .gb2, .gb3{
        display: none;
      }
    </style>
  </head>
  <body>
    <button class="gameboy-button">Click Me</button>
    <div class="gb1">I am GB One</div>
    <div class="gb2">I am GB Two</div>
    <div class="gb3">I am GB Three</div>
  </body>
</html>

或者让您的代码更动态地处理当前状态，如下所示：

var currentGb = 1
$('.gameboy-button').click(function(){
    $('.gb' + currentGb).fadeOut(500);
    nextGb = currentGb + 1;
    $('.gb' + nextGb).fadeIn(3000);
    currentGb = nextGb
});

<html>
  <head>
    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
    <style>
      .gb2, .gb3{
        display: none;
      }
    </style>
  </head>
  <body>
    <button class="gameboy-button">Click Me</button>
    <div class="gb1">I am GB One</div>
    <div class="gb2">I am GB Two</div>
    <div class="gb3">I am GB Three</div>
  </body>
</html>

Answer 3

$('.gameboy-button').click(function(){
$('.gb1').fadeOut(500);
$('.gb2').fadeIn(3000);
$('.gameboy-button').off('click').click(function(){
$('.gb2').fadeOut(500);
$('.gb3').fadeIn(3000);
});

Answer 4

您会尝试使用这种方法来获取所有功能吗

var index = 1;

function fadeInPic() {
  $('.gb1').fadeIn(3000).delay(500);
}

function fadeInPicByClick() {
  console.log($('.toggleDiv').length);
  var currentIndex = index;
  index++;
  if ($('.toggleDiv').length + 1 == index) {
    currentindex = $('.toggleDiv').length;
    index = 1;
  }
  $('.gb' + currentIndex).fadeOut(500);
  $('.gb' + index).fadeIn(3000);
}
$(document).ready(function() {

  //This image automatically fades in when my page loads which I want...

  fadeInPic();


  //When you click this button gb1 fades out and gb2 fades in which is fine....
  $('.gameboy-button').click(function() {
    fadeInPicByClick();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gameboy-button">button i guess</div>

<div class='gb1 toggleDiv' style='display:none'>
  gb1
</div>

<div class='gb2 toggleDiv' style='display:none'>
  gb2
</div>

<div class='gb3 toggleDiv' style='display:none'>
  gb3
</div>

单击同一按钮如何使多个事件发生？

4 个答案: