javascript - 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就直接完成了两个动画，如何设置点击执行第一个，再点击隐藏

解决方案

  $("#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);
}

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

这篇关于javascript - js动画点击显示，返回事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！