jQuery动画-隐藏和显示

jQuery hide()

• 语法：$(selector).hide(speed,callback)
• .hide() // 直接隐藏，相当于.hide("0")；
• .hide("500");
• .hide("fast" | "slow");
• .hide("500",function() { }); // 动画结束的回调函数
• .hide( [duration],[complete] );
• show与hide方法的原理是修改的display属性
• jQuery在做hide操作的时候，是会保存本身的元素的原始属性值，再之后通过对应的方法还原的时候还是初始值。display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline，然后是隐藏和显示，这个元素将再次显示inline

---

jQuery show()

• 使用方法与 jQuery hide() 一致，但结果相反
• 如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度
• 如果使用!important在你的样式中，比如display: none !important，如果你希望.show()方法正常工作，必须使用.css('display', 'block !important')重写样式

---

jQuery stop()

• $("#a1").stop().hide("3000").show("3000");
• .stop();//用于避免动画执行过程中反复触发
• $("#div").stop();//停止当前动画，继续下一个动画
• $("#div").stop(true);//清除元素的所有动画
• $("#div").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画
• $("#div").stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态

---

jQuery toggle()

• 语法：$(selector).toggle( [duration ] [, complete ] )
• .toggle();
• .toggle(3000);
• 直接定位：.toggle(display)，直接提供一个参数，指定要改变的元素的最终效果