中午好!
jQuery animate()方法允许自定义动画.有4个参数
参数:prop 定义形成动画的CSS样式,几乎可以用所有的CSS样式,
speed 动画的速度
easing 不同的动画点中设置动画速度的
callback animate()函数执行完之后,要执行的函数
例子:
<script src="/jquery/jquery-2.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
var div=$("div");
div.animate({ height: '300px' });//例子只用第1个参数
div.animate({ width: '300px'});
div.animate({ height: '100px' });
div.animate({ width: '100px' });
div.animate({ left: '250px' });
div.animate({ fontSize: '3em' });
div.animate({ height: 'hide' });
});
});
</script>
</head>
<body>
<button>开始</button>
<div style="background:#4cff00;position:absolute;height:100px;width:100px">字</div>
</body>
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
例子:
<script src="/jquery/jquery-2.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#start").click(function(){
$("div").animate({width: '300px'},3000);
});
$("#stop").click(function () {
$("div").stop();
});
});
</script>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<div style="background:#4cff00;position:absolute;height:100px;width:100px"></div>
</body>
jQuery Callback 函数刚刚说动画第4是参数的callback animate()函数执行完之后,要执行的函数
这个参数很多方法也有如hide(speed,callback)第1个参数时间,第2个参数就是这个函数了
例子:
<script type="text/javascript" src="/jquery/jquery-2.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("p").hide(3000, function () {
alert("这是hide()运行完后运行");
});
});
});
</script>
</head>
<body>
<button type="button">消失</button>
<p>点击会消失</p>
</body>
jQuery 方法链接,如需链接一个动作,您只需简单地把该动作追加到之前的动作上
例子:
<script src="/jquery/jquery-2.1.0.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">加油!自己还要更努力 !</p>
<button>点击这里</button>
</body>
</html>