jq中三组动画和自定义动画
程序员文章站
2022-03-17 12:57:50
...
相同点是，如果不传参数就没有动画效果
1、显示隐藏show(),hide()传进去的值代表动画持续的时间。也可以是字符串，可以是slow==200ms norma==400ms fast==600ms还可以传进去两个参数，第一个是持续时间，第二个是一个函数，类似js链式运动框架里的函数，执行完动画后执行。
2、滑入滑出slideDown()slideUp()如果不传参数，默认是normal。其他与显示隐藏相同，并且也有类似链式运动。
切换slideToggle()当你是滑入状态时，会执行滑出，如果是滑出状态，会执行滑入，相当于自己进行了判断。
3、淡入淡出fadeIn() fadeOut() fadeToggle(),与滑入滑出相同
4、自定义动画animate()其中有四个参数。第一个：对象，动画需要执行的样式，这个是必填的，如animate({left:800}),就是向右移动800px. 第二个：speed动画执行的时间。第三个：动画执行的样式，有swing(秋千)和linear(线性匀速),默认是swing。第四个：回调函数
5、为了防止快速移动或者点击出现bug，因为动画执行需要一段时间，jq是执行一个动画队列，当你快速移动时，由于时间的问题，当你鼠标不移动，动画还是会执行，此时就需要在动画前面加入一个stop()方法,一定是动画前面,对于第一次滑入执行，因为之前没有动画，所以不执行stop()，然后开始执行滑入动画，此时鼠标快速离开，对于滑出动画，就会执行stop(),即滑入动画没有执行完就被结束，然后执行滑出动画。stop()就是判断在这个动画之前，你有没有其他的动画，有就给你停止，没有就不执行stop()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 1300px;
}
#box {
width: 1200px;
height: 400px;
border: 2px solid red;
margin: 100px auto;
}
#box li {
width: 240px;
height: 400px;
/*border: 1px solid #000;*/
float: left;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script>
$(function(){
var $li = $('#box li');
//对页面初始化
for(var i=0;i<$li.length;i++){
$li.eq(i).css('backgroundImage','url(images/'+(i+1)+'.jpg)');
}
//给li加鼠标移入事件
$li.mouseenter(function(){
$(this).stop().animate({width:800}).siblings().stop().animate({width:100});
}).mouseleave(function(){
$li.stop().animate({width:240})
});
});
</script>
</body>
</html>