jquery进阶
animate 动画
animate() 动画
- 默认的运动形式是 慢快慢(swing),另外一种是匀速。
匀速 “linear”
慢快慢 “swing”
$("#div1").hover(function(){
$("#div2").animate({
width: 300,
height: 300,
opacity: 0.5
}, 4000, function(){
$("#div1").html("移入");
})
}, function(){
$("#div2").animate({
width: 200,
height: 200,
opacity: 1
}, 4000, function(){
$("#div1").html("移出");
})
})
- 拓展更多animate的运动形式:
引入 jquery-ui查找动画特效 - 有了JQueryUI以后 addClass和removeClass就变成了增强版的方法
$("button").eq(0).click(function(){
$("#div1").addClass("box", 4000);
})
$("button").eq(1).click(function(){
$("#div1").removeClass("box", 4000);
})
$( "#datepicker" ).datepicker();
$( "#tabs" ).tabs();
【小技巧】我们可以在每次调用animate之前先去调用一次stop关闭上一次定时器——>保证当前动画能马上触发,会攒着动画下次触发继续执行。
$(this).stop(true).animate({
width: 300,
height: 300
}, 2000)
}, function(){
$(this).stop(true).animate({
width: 100,
height: 100
}, 2000)
})
延迟与停止动画:delay() 、stop()、finish()
- stop() 停止动画
- 无参数:停止第一个动画
- 一个参数true:停止所有动画
- 两个参数true:停止所有动画,当前正在进行的动画,直接到达目的值
- finish() 停止所有动画,并且将所有的动画都到达目的值
$("#div2").click(function(){
// $("#div1").stop(); //停止第一个动画,当时后续动画正常运动
// $("#div1").stop(true); //停止所有动画
// $("#div1").stop(true, true); //停止所有动画,并且使当前正在进行的动画,直接到达目的值
$("#div1").finish(); //停止所有动画,并且将所有的动画都到达目的值
})
- delay() 延迟
delay(4000)
$("#div1").animate({width: 300}, 2000).delay(4000).animate({height: 300}, 2000);
remove() detach() 删除元素节点
-
remove() 删除元素节点
【注】并不会保留这个元素节点上之前的事件和行为 -
detach() 删除元素节点
【注】会保留这个元素节点上之前的事件和行为 -
返回值就是我们删除这个节点
$(function(){
$("#div1").hover(function(){
$(this).css("backgroundColor", 'orange');
}, function(){
$(this).css("backgroundColor", 'blue');
})
$("button").click(function(){
//remove 返回值就是我们删除这个节点
// var node = $("#div1").remove();
var node = $("#div1").detach();
node.appendTo($("#div2"));
})
})