如何知道是否所有匹配的元素已经隐藏使用滑升

how to know if all matched elements have been hidden using slideUp

本文关键字：隐藏 元素 是否 何知道      更新时间：2023-09-26

我有这个测试在这里:http://jsbin.com/epihis/2/edit

，我有三个段落，当点击时一个接一个滑升。一旦所有段落都被隐藏，我想显示一个按钮来滑动它们。

我该怎么做?

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
   $(document).ready(function(){ 
     //jQuery mouseover function
       $("p#hovercolor").mouseover(function(){
        $("p#hovercolor").css("background-color","yellow");
       });
     //jQuery mouseout function
      $("p#hovercolor").mouseout(function(){
        $("p#hovercolor").css("background-color","green");
      });
     //jQuery click function
    $('input[name="Colorbtn"]').click(function(){
        $('.myBox').css('background', '#00aeef');
        $('.myBox').css('color', '#fff');
     });
     $('input[name="discolorbtn"]').click(function(){
        $('.myBox').css('background', '#fff');
        $('.myBox').css('color', '#000');
     });
     //Hide the matched elements with a sliding motion.
     $('p.sliderhider').click(function(){
       $(this).slideUp(); 
     });

  });    
</script>
</head>
<body>
  <p id="hovercolor">Move the mouse pointer over this paragraph.</p>
  <div class="myBox" style="border:1px solid blue; width:150px; height:150px; margin-bottom:20px;">
    BOX 1
  </div>
  <input type="button" value="Color myBox" name="Colorbtn"/>
  <input type="button" value="Dis-Color myBox" name="discolorbtn"/><br /><br />
  <hr>
  <p class="sliderhider" style="display:block; background: yellow; width:200px">Slide this up one at a time</p>
  <p class="sliderhider" style="display:block; background: yellow; width:200px">Slide this up one at a time</p>
  <p class="sliderhider" style="display:block; background: yellow; width:200px">Slide this up one at a time</p>
</body>
</html>

尝试:

 $('p.sliderhider').click(function () {
     $(this).slideUp(function () {
         if ($('p.sliderhider:visible').length === 0) {
             $('hr').after('<button id="show">Button</button>')
         };
     });
 });
 $(document).on('click', '#show', function () {
     $('p.sliderhider').show();
 })
<<p> jsFiddle例子/strong>

在slideUp的回调中，您可以检查可见段落的长度，当没有剩余段落时，生成按钮以再次显示它们

在slideUp回调中写一个条件检查是否所有p.sliderhider都被隐藏

//Hide the matched elements with a sliding motion.
 $('p.sliderhider').click(function(){
   $(this).slideUp({'complete': function () {
     if ($('p.sliderhider:visible').length == 0) {
       $('#showPara').show();
     }        
   }}); 
 });
 $('#showPara').click(function (){
    $('p.sliderhider').slideDown();
 });

如果是，显示可以slideDown所有.sliderhider的按钮

演示:

http://jsbin.com/epihis/5

jQuery允许你传递一个回调，它将在动画完成后被触发:

$('p.sliderhider').click(function(){
    $(this).slideUp({'complete': function() {
        // show "slide down" button here
    }}); 
});
相关文章：