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

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

句法：

$('selector').slideDown();

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

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

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

HTML

  

    
    
    
  
    
    
    
      
    
        h1 {
            color: #006600;
        }
  
        body {
            text-align: center;
        }
  
        #slider {
            text-align: center;
            padding: 5px;
            border: 2px solid black;
            color: #006600;
        }
  
        #GFG {
            padding: 5px;
            border: 2px solid black;
            background-color: #006600;
            font-size: xx-large;
            color: whitesmoke;
            height: auto;
            display: none;
        }
    

  

     Geeks for Geeks
  
    
  
     
        ENTER MOUSE TO SEE THE SLIDEDOWN EFFECT 
    
      
    
        Geeks for Geeks
    
  
    
        $(document).ready(function () {
            $('#slider').mouseenter(function () {
                $('#GFG').slideDown('slow');
            })
        });
    

  

输出：

示例 2：以下示例演示了 jQuery 鼠标输入（） 和mouseleave()事件。

HTML

  

    
    
    
  
    
    
    
      
    
        h1 {
            color: #006600;
        }
  
        body {
            text-align: center;
        }
  
        #slider {
            text-align: center;
            padding: 5px;
            border: 2px solid black;
            color: #006600;
  
        }
  
        #GFG {
            padding: 5px;
            border: 2px solid black;
            background-color: #006600;
            font-size: xx-large;
            color: whitesmoke;
            height: auto;
            display: none;
        }
    

  

     Geeks for Geeks
  
    
        ENTER AND LEAVE MOUSE TO 
        SEE THE SLIDEDOWN EFFECT
    
      
    
        Geeks for Geeks
    
  
    
        $(document).ready(function () {
            $('#slider').mouseenter(function () {
                $('#GFG').slideDown('slow');
            })
            $('#slider').mouseleave(function () {
                $('#GFG').slideDown('slow');
                $('#GFG').css({ 
                    'background-color': 'yellow', 
                    'color': '#006600' 
                });
            })
        });
    

  

输出：

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

HTML

  

    
    
    
  
    
    
    
  
    
        h1 {
            color: #006600;
        }
  
        body {
            text-align: center;
        }
  
        #slider {
            text-align: center;
            padding: 5px;
            border: 2px solid black;
            color: #006600;
        }
  
        #GFG {
            padding: 5px;
            border: 2px solid black;
            height: auto;
            display: none;
        }
    

  

     Geeks for Geeks
  
    
        CLICK TO SEE THE SLIDEDOWN EFFECT
    
      
    
  
        
        
        
    
  
    
        $(document).ready(function () {
            $('#slider').click(function () {
                $('#GFG').slideDown('slow');
            })
        });
    

  

输出：