jQuery package gave us a lot of animation, the most common are as follows:
- Show hidden: show () / hide () / toggle ();
- Draw included: slideDown () / slideUp () / slideToggle ();
- Fade: fadeIn () / fadeOut () / fadeToggle () / fadeTo ();
- Custom animation: animate ();
note:
Once the trigger animations or effects will be executed if the trigger several times, causing multiple animations or effects queued for execution.
jQuery provides us with another way, you can stop the animation queue: stop ();
1.5.1 Show hidden
Show hidden animations, there are three common methods: show () / hide () / toggle ();
Syntax specification is as follows:
Code demonstrates
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
$("div").show(1000, function() {
alert(1);
});
})
$("button").eq(1).click(function() {
$("div").hide(1000, function() {
alert(1);
});
})
$("button").eq(2).click(function() {
$("div").toggle(1000);
})
// 一般情况下，我们都不加参数直接显示隐藏就可以了
});
</script>
</body>