jquery 动画

Posted 2020-09-18 DOIT

一、隐藏元素 hide()

jQuery在做hide操作的时候，是会保存本身的元素的原始属性值，再之后通过对应的方法还原的时候还是初始值。

比如一个元素的display属性值为inline，那么隐藏再显示时，这个元素将再次显示inline。

一旦透明度 达到0，display样式属性将被设置为none，这个元素将不再在页面中影响布局

<div id="a1">hide操作</div>
<button>直接hide</button>
<button>hide带动画</button>
 $("button:first").click(function() {
    $("#a1").hide(); // 无参
 });

 $("button:last").click(function() {
    $("#a1").hide({           //有参数
       duration: 3000,
       complete: function() {
           alert(‘执行3000ms动画完毕‘)
       }
    })
  });

$("").hide(2000,function(){
　　　...
})
$(selector).hide(speed,easing,callback) 参数可选 毫秒 ，运行曲线 ，回调函数

 

二、show() 方法

用法是hide() 类似

show与hide方法是非常常用的，但是一般很少会基于这2个属性执行动画，大多情况下还是直接操作元素的显示与隐藏为主

注意事项：

• show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置
• 如果使用!important在你的样式中，比如display: none !important，如果你希望.show()方法正常工作，必须使用.css(‘display‘, ‘block !important‘)重写样式
• 如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度

$("button").click(function() {
    $("#a1").hide(3000).show(3000)
});

优化：

$("button").click(function() {
    $("#a1").stop().hide(3000).show(3000); // stop()方法为被选元素停止当前正在运行的动画,防止动画运行中，用户多次点击-->形成多次触发。
});

 

三、显示与隐藏切换toggle方法

这是最基本的操作，处理元素显示或者隐藏，因为不带参数，所以没有动画。通过改变CSS的display属性，匹配的元素将被立即显示或隐藏，没有动画。

• 如果元素是最初显示，它会被隐藏
• 如果隐藏的，它会显示出来

display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline，然后是隐藏和显示，这个元素将再次显示inline

 $("button:first").click(function() {
    $(".left").toggle(3000)
 });