$(function(){
/*$('.button').click(function(){
$('#box').animate({
left:'+=300px'
}, 3000);
});*/
// stop()停止 不带任何参数只是停止第一个列队动画，接下来的列队会自动执行完
$('.stop').click(function(){
$('#box').stop(true);//带参数 第一个true 是停止当前队列，并且清除，接下来的对列 //第二个true 停止后会跳到最后的位置上默认值为false
});
/*$('.button').click(function(){
$('#box').animate({
left:'+=300px'
}).animate({top:'+=300px'}).delay(3000);
});*/
//不停的调用自己
$('#box').slideToggle('slow',function(){
$(this).slideToggle('show', arguments.callee);
});
$('.ani').click(function(){
//$('#box').css('background','orange');
$(':animated').css('background','orange');
});
$.fx.interval = 200;
$('.button').click(function(){
$('#pox').toggle(3000, arguments.callee);
});
});
HTML：
<!DOCTYPE HTML>
<html>
<head>
<title>Accordion</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-1.12.0.min.js"></script>
<script src="demo.js"></script>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<!--<input type="button" class="up" value="上"></input>
<input type="button" class="down" value="下"></input>
<input type="button" class="toggle" value="切换"></input>-->
<input type="button" class="button" value="按钮"></input>
<input type="button" class="stop" value="停止"></input>
<input type="button" class="ani" value="正在执行的运动"></input>
<div id="box">
box</div>
<div id="pox">
pox</div>
</body>
</html>
CSS：
#box{
width:100px;
height:100px;
background:red;
/* display:none; /**切换使用*/
}
#pox{
width:100px;
height:100px;
background:green;
/* display:none; /**切换使用*/
}
238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
