首页 > js动画点击显示,返回事件

js动画点击显示,返回事件

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

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

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


AnimationEnd 事件


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

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

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

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

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


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

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

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

【热门文章】
【热门文章】