jQuery实现点击切换效果及判断动画结束的方法

在使用 jQuery 实现点击切换效果时，我们常常需要处理一些复杂的动画逻辑。本文将详细介绍如何实现点击切换效果，并解决如何判断动画结束的问题。

1. 如何实现点击切换效果？

   当用户点击一个面板（panel）时，如果再次点击同一个面板，应该恢复到原始状态。具体实现如下：

   $(".panel").on("click", function() {
       var $this = $(this);
       if ($this.hasClass("open")) {
           $this.removeClass("open active");
       } else {
           $this.siblings().removeClass("open active");
           $this.addClass("open");
           setTimeout(function() {
               $this.addClass("active");
           }, 800);
       }
   });
   

2. 如何实现点击同一个元素后恢复 `flex: 1`？

   为了实现点击同一个元素后恢复 `flex: 1` 的效果，可以在点击事件中添加相应的逻辑：

   $(".panel").on("click", function() {
       var $this = $(this);
       if ($this.hasClass("open")) {
           $this.removeClass("open active").css("flex", "1");
       } else {
           $this.siblings().removeClass("open active").css("flex", "1");
           $this.addClass("open");
           setTimeout(function() {
               $this.addClass("active");
           }, 800);
       }
   });
   

3. 能否用 `transitionend` 事件代替 `setTimeout`？

   可以使用 `transitionend` 事件来代替 `setTimeout`，但需要注意的是，`transitionend` 事件可能不会在所有情况下都能正确触发。具体实现如下：

   $(".panel").on("click", function() {
       var $this = $(this);
       if ($this.hasClass("open")) {
           $this.removeClass("open active").css("flex", "1");
       } else {
           $this.siblings().removeClass("open active").css("flex", "1");
           $this.addClass("open");
           $this.one("transitionend", function() {
               $this.addClass("active");
           });
       }
   });
   

   如果 `transitionend` 事件没有生效，可能是因为某些浏览器或特定条件下没有正确触发该事件。此时可以考虑结合 `setTimeout` 作为备用方案。

以下是完整的 HTML 和 Javascript 代码示例：

    
    
    


    

        

            
Hey
            
Let's
            
Dance
        
        

            
Give
            
Take
            
Receive
        
        

            
Experience
            
It
            
Today
        
        

            
Give
            
All
            
You can
        
        

            
Life
            
In
            
Motion