📜  slideDown()函数如何在 jQuery 事件处理程序中工作?

📅  最后修改于: 2021-11-25 04:25:58             🧑  作者: Mango

jQuery函数slideDown()创建一些对某些事件处理程序做出反应的效果。它显示隐藏的内容,具有向下放置内容的某种效果。其他相关函数是slideUp() slideToggle() 。这些函数的工作方式也与slideDown()函数具有不同的效果一样。

句法:

$('selector').slideDown();
$('selector').slideDown(speed, callbackFunction);

注意: speed 的值可以是slowfast或任何固定的ms 。如果需要,也可以添加回调函数。并且为了最初的效果,内容应该将display属性设置为none

示例 1:让我们通过一些示例了解 jQuery 中的slideDown()函数是如何工作的。

HTML


  

    
    
    
  
    
    
      
    

  

    

Geeks for Geeks

       

       
          ENTER MOUSE TO SEE THE SLIDEDOWN EFFECT      
           
        Geeks for Geeks     
          


HTML


  

    
    
    
  
    
    
      
    

  

    

Geeks for Geeks

       
        ENTER AND LEAVE MOUSE TO          SEE THE SLIDEDOWN EFFECT     
           
        Geeks for Geeks     
          


HTML


  

    
    
    
  
    
    
  
    

  

    

Geeks for Geeks

       
        CLICK TO SEE THE SLIDEDOWN EFFECT     
           
                                  
          


输出:

示例 2:以下示例演示了 jQuery 鼠标输入() mouseleave()事件。

HTML



  

    
    
    
  
    
    
      
    

  

    

Geeks for Geeks

       
        ENTER AND LEAVE MOUSE TO          SEE THE SLIDEDOWN EFFECT     
           
        Geeks for Geeks     
          

输出:

示例 3:我们还可以为图像添加slideDown()方法。我们可以在div中放置一张图片点击 事件。

HTML



  

    
    
    
  
    
    
  
    

  

    

Geeks for Geeks

       
        CLICK TO SEE THE SLIDEDOWN EFFECT     
           
                                  
          

输出: