我有以下工作代码,我想更改它,因为它使用 400px 宽度的百分比。我怎么能做到呢? 具体来说,我希望它从 25% 的初始宽度变为 0,然后再次单击按钮后又回到 25%。 此外,使用相同的 show_hide_button 如何更改附加 div 的宽度,以便它在 75% 和 100% 之间切换。初始 75%,单击按钮时为 100%,再次单击按钮时返回 75%。
这是我的:
$(document).ready( function(){
$('#show_hide_button').click( function() {
var toggleWidth = $("#some_box").width() == 400 ? "0" : "400px";
$('#some_box').animate({ width: toggleWidth });
});
});
我将非常感谢任何帮助!
最佳答案
给你:
更新:这应该有效
CSS:
#some_box {
background: #fc0;
width: 25%;
height: 100px;
}
#some_other_box {
background: #0cf;
width: 75%;
height: 100px;
}
JS:
var collapsed = false;
$('#show_hide_button').click(function() {
if(!collapsed){
$('#some_box').animate({width: '0%'});
$('#some_other_box').animate({width: '100%'});
} else {
$('#some_box').animate({width: '25%'});
$('#some_other_box').animate({width: '75%'});
}
collapsed = !collapsed;
});
http://jsfiddle.net/moderndegree/xLHb8/
原始答案:
$(document).ready( function(){
$('#show_hide_button').click( function() {
$('#some_box').animate({ width: 'toggle' });
});
});
关于jquery - 使用百分比宽度 Jquery 设置 div 的动画宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17244895/