javascript - animate如何用同一个按钮控制横向伸缩？
本文介绍了javascript - animate如何用同一个按钮控制横向伸缩？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
为什么同一个按钮上无法设置两种animate属性呢，该怎样修改这段代码使同一个按钮点击一次时伸展，点击第二次时收缩呢?
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var l = $("#box").width();
if(l = "100px"){
$(".btn1").bind("click",function(){
$("#box").animate({width:"300px"});
});
}else{
$(".btn1").bind("click",function(){
$("#box").animate({width:"100px"});
});
};
});
</script>
</head>
<body>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
<button class="btn1">Animate</button>
</body>
</html>
解决方案
首先你需要具备以下知识：
ready方法是什么时候执行的？bind方法是怎么用的？.btn1被点击的时候会执行哪些代码？
我们逐一来看。
ready方法是什么时候执行的？
ready方法在文档加载完成后执行。
也就是说当body标签解析完后，以下代码将会执行一次：
1. var l = $("#box").width();
2. if(l = "100px"){
3. $(".btn1").bind("click",function(){
4. $("#box").animate({width:"300px"});
5. });
6. } else {
7. $(".btn1").bind("click",function(){
8. $("#box").animate({width:"100px"});
9. });
10. };我们来纠正一下代码中的基础错误。
1. var l = $("#box").width();
2. if(l == 100){
3. $(".btn1").bind("click",function(){
4. $("#box").animate({width:"300px"});
5. });
6. } else {
7. $(".btn1").bind("click",function(){
8. $("#box").animate({width:"100px"});
9. });
10. };注意第2行的 = 已经被纠正为 ==。并且width方法返回的是100而不是"100px"。
bind方法是怎么用的？
bind方法用于给元素绑定事件处理函数。它本身并不会执行事件处理函数。
看如下代码：
$(".btn1").bind("click", function(){
$("#box").animate({width:"300px"});
});注意，此时$("#box").animate(...)并没有执行。而是在.btn1被点击后才会执行。
.btn1被点击的时候会执行哪些代码？
现在我们来回顾一下上面标有行号的代码1-10行。
这段代码为.btn1绑定了一个点击事件处理函数，.btn1被点击后执行的就是这个处理函数。
这个处理函数到底是什么呢？
如果l == 100那么这个函数就是...animate(...300)，否则这个函数就是...animate(...100)。
注意，这个判断是在文档加载完成的时候执行了一次，而不是在每次点击.btn1的时候执行。
因此，你在一开始就决定了点击.btn1时应该调整#box的width为100还是300，并且此后是不会改变的。
应该如何实现你要的效果？
直接看代码吧，如果已经能够理解自然是再好不过：
$(document).ready(function() {
$(".btn1").bind("click", function() {
var $box = $("#box");
if ($box.width() == 100) {
$box.animate({width: "300px"});
} else {
$box.animate({width: "100px"});
}
});
});更多关于jQuery的知识建议多查阅官方文档。
希望对你有帮助。
这篇关于javascript - animate如何用同一个按钮控制横向伸缩？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
