Question

我正在玩jquery。我想要做的是点击＆＃34;立即隐藏我＆＃34;按钮，以便div元素一个接一个地淡出。我怎么做？我在这里弄到了一个小提琴：https://jsfiddle.net/um7ctpnj/1/

的index.html

<!doctype html>
  <head>
    <title>Button Show</title>
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>
  <body>

    <button id="show" type="button" class="btn btn-primary">Click Me!</button> 
    <button id="hide" type="button" class="btn btn-primary">Hide Me Now!</button> 

    <div id="one">1</div>
    <div id="two">2</div>
    <div id="three">3</div>

    <script src="javascript.js"></script>  
  </body>
</html>

javascript.js

$(document).ready(function (){
    $('#show').click(function(){
        $( "div:hidden:first" ).fadeIn( "slow" );
    });
    $('#hide').click(function(){
        $( "div" ).fadeOut("fast");
    });
});

stylesheet.css中

  div {
    margin: 3px;
    width: 80px;
    display: none;
    height: 80px;
    float: left;
  }
  #one {
    background: #f00;
  }
  #two {
    background: #0f0;
  }
  #three {
    background: #00f;
  }

Answer 1

您可以使用像

这样的反向过滤器

＆＃13;

$(document).ready(function() {
  $('#show').click(function() {
    $("div").stop(true, true).filter(":hidden:first").fadeIn("slow");
  });
  $('#hide').click(function() {
    $("div").stop(true, true).filter(":visible:last").fadeOut("slow");
  });
});

＆＃13;

div {
  margin: 3px;
  width: 80px;
  display: none;
  height: 80px;
  float: left;
}
#one {
  background: #f00;
}
#two {
  background: #0f0;
}
#three {
  background: #00f;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="show" type="button" class="btn btn-primary">Click Me!</button>
<button id="hide" type="button" class="btn btn-primary">Hide Me Now!</button>
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>

＆＃13;

Answer 2

$('#hide').click(function(){
    $( "div" ).fadeOut("fast");
});

由于使用div选择器而不是使用div:visible:last逐个隐藏，因此所有div淡出。

$('#hide').click(function(){
    $( "div:visible:last" ).fadeOut("fast");
});

检查工作fiddle

Answer 3

$('#hide').click(function () {

    $divHandle = $('.box');
    timer = setInterval(function () {
        if ($divHandle[divCount]) {
            $($divHandle[divCount++]).fadeOut("fast");

        } else {
            clearInterval(timer);
        }

    }, CONST_TIME)
});

请在这个小提琴中找到所需的实现

JSFIDDLE

JavaScript / jQuery逐个隐藏div

的index.html

javascript.js

stylesheet.css中

3 个答案: