<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<input type="button" id="input" value="按钮" />
<div></div>
</body>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('div').on('mouseover',function(){
$(this).animate({width:600,height:600},3000,function(){
$(this).animate({width:100,height:100},3000,function(){
});
});
});
/*
// 连续调用jQuery的方法但是只使用了一次选择器,这种方式叫做链式调用
$('.box').animate({width:300,height:300}, 3000)
.animate({width:50, height:50}, 3000);
*/
$('input').on('click',function(){
// 效果等同于stop(false, false)
//$('div').stop();
//第一个false 会将第一个动画立刻停止 播放下一个动画
//$('div').stop(false,false);
//立刻执行完第一个动画 再执行后面的
//$('div').stop(false,true);
//后面的动画会停止(清空了后续动画) 不会执行
//$('div').stop(true,false);
//瞬间执行完第一个动画 没有后续的动画执行
$('div').stop(true,true);
});
</script>
jQuery stop()用法
最新推荐文章于 2020-09-08 19:39:36 发布