javascript - js动画点击显示，返回事件

Question

$(function() {
        $("#tag-btn1").click(function() {
                $("#tag-p1").animate({
                    left: '122px',
                    opacity: '1',           
                })
        });

          $("#tag-btn1").click(1000,function(){
                $("#tag-p1").animate({
                    left: '100px',
                    opacity: '0', 
              });
        });
});

点击一下btn1就直接完成了两个动画，如何设置点击执行第一个，再点击隐藏

Answer 1

  $("#tag-btn1").one("click",function() {
                $("#tag-p1").animate({
                    left: '122px',
                    opacity: '1',           
                })
                  $("#tag-btn1").one("click",function(){
                $("#tag-p1").animate({
                    left: '100px',
                    opacity: '0', 
              });
        });
        });
        
        
这种？   

改一下：
   $("#tag-btn1").one("click", show );

function show(){
     $("#tag-p1").animate({
                left: '122px',
                opacity: '1',           
            })
       $("#tag-btn1").one("click", hide);
}

function hide(){
     $("#tag-p1").animate({
                left: '100px',
                opacity: '0', 
          });
      $("#tag-btn1").one("click", show);
}

这样就可以重复了，不过你的动画要改一下了。

Answer 2

添加监听事件，监听AnimationEnd，监听方法就是第二个动画

$(function() {
        $("#tag-btn1").click(function() {
                $("#tag-p1").animate({
                    left: '122px',
                    opacity: '1',           
                });
                
                $("#tag-p1").get(0).addEventListener("AnimationEnd",function(){
                    //AnimationEnd 注意区分浏览器厂商
                     $("#tag-p1").animate({
                        left: '100px',
                        opacity: '0', 
                  });
                });
        });
});

Answer 3

个人觉得应该增加多个判断条件就行了

Answer 4

AnimationEnd 事件