如何在 jQuery 中使用 toggle() 方法？

toggle() 方法用于在 CSS 的属性之间振荡，同时用于为元素产生动画效果。各种jQuery 效果是hide()、fade() 和slide()。基本上，toggle() 方法在 CSS 属性 display 之间摆动：如果存在则无，否则返回到其原始状态。

对于 hide()、fade() 和 slide() 具有切换功能，如 hideToggle()、fadeToggle() 和 slideToggle()。

句法：

$(selector).toggle(time, callback_function)

例子：

HTML

  

    
    
    
  
    
    
    
      
    
        h1 {
            color: #006600;
        }
  
        button {
            color: white;
            background-color: #006600;
            width: 100px;
            height: 30px;
        }
  
        body {
            text-align: center;
        }
  
        div {
            border: 2px solid black;
            border-radius: 10px;
            margin: 10px;
            height: 150px;
            width: 150px;
            position: relative;
            text-align: center;
            display: flex;
            left: 215px;
        }
    

  

    Geeks For Geeks
  
     HIDE 
  
    
  
        
        
        
    
  
    
        $('#btn').click(function () {
            $('#btn').text($('#btn')
                .text() === 'SHOW' ? 'HIDE' : 'SHOW');
            $('div').toggle(2000)
        });
    

  

输出：