jq animate动画详解
程序员文章站
2024-03-25 12:33:34
...
// animate():第一个参数：{width:200} 运动的值和属性
// 第二个-时间：默认400ms{},1000
//第三个-运动形式-两种：1.默认：swing(慢快慢) 2.linear(匀速)
//第四个-回调函数
//$(this).animate({width:"300px",height:"300px"},2000,'linear',function(){alert(123)});
//stop():默认阻止当前运动，不阻止所有，stop(true) 阻止后续所有运动
stop(true,true) 停止到最终的目标点
finish() 立即完成运动。
运动前加stop()可以清除运动队列(不总是重复)。(鼠标移入移除 mouseover、out)
$(this).stop().animate({width:'200px'},1000) //针对的是同一个元素上面的效果
<script>
//jQuery动画animate和scrollTop结合使用
$('li').click(function(){
//$(document).scrollTop($(this).index()*viewHeight);
var H = $(this).index()*viewHeight;
var heiGht = $('#div1').offset().top;
$('html,body').animate({scrollTop: H}, 1000);
});
</script><script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
position:absolute;
}
#pox {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 200px;
}
</style>
</head>
<body>
<input type="button" class="button" value="开始" />
<input type="button" class="stop" value="停止" />
<div id="box">box</div>
<div id="pox">pox</div>
<script type="text/javascript">
$(function () {
$(".button").click(function () {
$("#box").animate({
left: "300px" //要想使用left top bottom right这种方向性的属性 先必须对"#box元素设置CSS 绝对定位
})
})
//-------------------------------------同步动画
$(".button").click(function () {
$("#box").animate({
width: "300px",
height: "200px",
opacity:0.5, //透明度为0.5 注：透明度的值在0-1之间
fontSize:"200px", //字体大小设为30px
}) //第一个参数：是一个对象，他是键值对的css
})
//--------------------------------------列队动画,一个一个来
$(".button").click(function () {
$("#box").animate({ width: "300px"}, 1000, function(){
$("#box").animate({height:"200px"},1000,function(){
$("#box").animate({opacity:0.5},1000,function(){
$("#box").animate({fontSize:"150px"},1000,function(){alert("完毕")})
});
});
});
})
//在同一个元素的基础上，使用链式(队列)调用也可以实现列队动画
$(".button").click(function () {
$("#box")
.animate({ width: "300px" }, 1000)
.animate({ height: "200px" }, 1000)
.animate({ opacity: 0.5 }, 1000)
.animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕")})
});
//那我们现在的需求是：不管你有几个元素，我都要他们依次实现列队动画效果。(测试了一下，只能用这种回调函数嵌套的方式来实现了)
$(".button").click(function () {
$("#box").animate({ width: "300px" }, 1000, function () { //box
$("#pox").animate({ height: "200px" }, 1000, function () { //#pox
$("#box").animate({ height: "200px"}, 1000, function () {
$("#pox").animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕") });
})
})
})
})
//那下面再来了解下，列队动画的停止
$(".button").click(function () {
$("#box")
.animate({ left: "300px" },1000)
.animate({ bottom: "300px" }, 1000)
.animate({ width: "300px" }, 1000)
.animate({ height: "300px" }, 1000)
})
$(".stop").click(function () {
$("#box").stop(true); // 加参数停止所有动画，不加停止当前
})
//现在，我们想继续在.queue()方法后面再增加一个隐藏动画，这时发现居然无法实现。
这是.queue()特性导致的。
有两种方法可以解决这个问题，jQuery 的.queue()的回调函数可以传递一个参数，
这个参数是next 函数，在结尾处调用这个next()方法即可再链式执行列队动画。
//链式编程实现队列动画
$(".button").click(function () { //四个动画
$("#box")
.slideUp(1000)
.slideDown(1000)
.queue(function (next) { //这个next是一个函数
$(this).css("background", "yellow");
next();})
.hide(1000);
});
//顺序编程实现队列动画 我们看到使用顺序调用的列队，逐个执行，非常清晰
$(".button").click(function () {
$("#box").slideUp(1000);
$("#box").slideDown(1000);
$("#box").queue(function (next) {
$(this).css("background", "yellow");
next(); });
$("#box").hide(1000);
});
});
</script>
</body>