Javascript 如何知道是否已使用slideUp隐藏了所有匹配的元素_Javascript_Jquery_Html_Css

Javascript 如何知道是否已使用slideUp隐藏了所有匹配的元素

javascript jquery html css

Javascript 如何知道是否已使用slideUp隐藏了所有匹配的元素,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我这里有一个测试：我有三个段落，点击时一个接一个地滑动。一旦所有的滑翔伞都被隐藏，我想显示一个按钮来向下滑动它们我该怎么做 <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> <script> $(document).ready(functi

我这里有一个测试：

我有三个段落，点击时一个接一个地滑动。一旦所有的滑翔伞都被隐藏，我想显示一个按钮来向下滑动它们

我该怎么做

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


$（文档）.ready（函数（）{
//jquerymouseover函数
$（“p#hovercolor”）.mouseover（函数（）{
$（“p#hovercolor”）.css（“背景色”、“黄色”）；
});
//jQuery mouseout函数
$（“p#hovercolor”）.mouseout（函数（）{
$（“p#hovercolor”）.css（“背景色”、“绿色”）；
});
//jQuery单击函数
$（'input[name=“Colorbtn”]”）。单击（函数（）{
$（'.myBox'）.css（'background'，'00aeef'）；
$（'.myBox'）.css（'color'，'#fff'）；
});
$（'input[name=“discolorbtn”]”）。单击（函数（）{
$（'.myBox'）.css（'background'，'#fff'）；
$（'.myBox'）.css（'color'，'#000'）；
});
//使用滑动运动隐藏匹配的元素。
$（'p.sliderhider'）。单击（函数（）{
$（this.slideUp（）；
});
});    
将鼠标指针移到此段落上
方框1




将此幻灯片一次向上滑动一个
将此幻灯片一次向上滑动一个
将此幻灯片一次向上滑动一个

jQuery允许您传递回调，该回调将在动画完成后触发：

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

尝试：

$（'p.sliderhider'）。单击（函数（）{
$（this）.slideUp（函数（）{
if（$（'p.sliderhider:visible'）。长度==0）{
$（'hr'）。在（'Button'之后）
};
});
});
$（文档）。在（'单击'，'显示'）上，函数（）{
$（'p.sliderhider'）.show（）；
})

在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();
 });

如果是，则显示可向下滑动的按钮

演示：

为什么不试试

.toggle（）

？该回调用于每个匹配的元素slideUp。我想确保所有元素都经过了slideUp，所以所有元素都消失了。现在，在确保所有内容都消失后，显示一个按钮以显示所有内容。您可以增加一个计数器，当计数器达到段落数时，执行向下滑动。很好地使用

：visible

。好主意。

//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();
 });