javascript Div 宽度在单击时展开/缩小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5054278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div width expand/shrink on click
提问by Salem
For a site I'm making for myself and a friend, I have a div container/wrapper with 2 other divs within it: one occupies the left half and has a black background and the other occupies the right with a white background. Essentially, this lets me get a split colored background. Each div holds half of a logo. Here's the page, temporarily hosted so you guys can see it.
http://djsbydesign.com/tempsite/index.htm
对于我为自己和朋友制作的网站，我有一个 div 容器/包装器，其中包含 2 个其他 div：一个占据左半部分，背景为黑色，另一个占据右侧，背景为白色。本质上，这让我可以得到一个分离的彩色背景。每个 div 包含一个标志的一半。这是页面，临时托管，以便你们可以看到它。
http://djsbydesign.com/tempsite/index.htm
At any rate, I'd like to have links on the left and right hand sides of the page that, on click, cause their respective divs to expand from 50% to 100%. I have a few ideas, but am not sure entirely how to go about doing this (I'm rather new to javascript). The first would be to have the expanding div's z-index set to something higher than the non-expanding one, and then have it expand (somehow), and the other is to have the expanding div expand to 100% while the other shrinks to 0% at an equal rate.
无论如何，我希望在页面的左侧和右侧都有链接，点击后，它们各自的 div 从 50% 扩展到 100%。我有一些想法，但我不完全确定如何去做（我对 javascript 比较陌生）。第一种方法是将扩展 div 的 z-index 设置为高于非扩展 div 的值，然后让它扩展（以某种方式），另一种是将扩展 div 扩展到 100%，而另一个缩小到0% 等价。
The bottom line is, I have no idea how to go about doing this. I don't mind using mootools or jQuery, for the record.
最重要的是，我不知道如何去做。我不介意使用 mootools 或 jQuery，作为记录。
回答by David says reinstate Monica
The following seems to work:
以下似乎有效：
$('#left-bg, #right-bg').click(
function(){
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
});
Albeit I'm not sure how you'd plan to bring back the the 'other' div.
尽管我不确定你打算如何带回“另一个” div。
Edited编辑添加一个按钮（通过 jQuery），允许两个
divdivs 都恢复到原始尺寸：$('#left-bg, #right-bg').click(
function(){
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
$('<button class="show">Show all</button>')
.appendTo('#wrapper');
});
$('.show').live('click',
function(){
$('#left-bg').animate(
{
'width': '50%'
},600);
$('#right-bg').animate(
{
'width': '50%'
},600);
$(this).remove();
});
Editedto address the question left by OP in the comments:
编辑以解决 OP 在评论中留下的问题：
is there a way to have a page redirect after the animation completes?
动画完成后有没有办法让页面重定向？
Yep, just add the line window.location.href = "http://path.to.url.com/";
是的，只需添加行 window.location.href = "http://path.to.url.com/";
$('#left-bg, #right-bg').click(
function(){
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
$('<button class="show">Show all</button>')
.appendTo('#wrapper');
window.location.href = "http://www.google.com/" // <-- this line redirects.
});
$('.show').live('click',
function(){
$('#left-bg').animate(
{
'width': '50%'
},600);
$('#right-bg').animate(
{
'width': '50%'
},600);
$(this).remove();
});
Edited针对错误报告进行了编辑（在评论中）：
The one other bug (easy fix) is that any time you click on either of the divs, it creates a new button. So say you clicked on the left half, and it expanded and filled the page, etc., and then you clicked on it again (it being anywhere on the page now). It would attempt to add a second button.
另一个错误（简单修复）是，无论何时单击任何一个 div，它都会创建一个新按钮。假设您单击左半部分，它扩展并填满了页面，等等，然后您再次单击它（它现在位于页面上的任何位置）。它会尝试添加第二个按钮。
To prevent a second button being added to the divjust add an if:
为了防止第二个按钮被添加到div只需添加一个if：
$('#left-bg, #right-bg').click(
function(){
if (!$('.show').length) {
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
$('<button class="show">Show all</button>')
.appendTo('#wrapper');
window.location.href = "http://www.google.com/" // <-- this line redirects.
}
});
Which, will only append a button, or indeed animate the divs, so long as the $('.show')selector returns nomatches.
其中，仅追加一个button，或甚动画divS，只要$('.show')选择收益不匹配。
However if you're also redirecting to another page by clicking the button it shouldn't be an issue anyway, since none of the jQuery on the original page will exectute/be able to access the page to which the user is redirected (unless it's a page on your own domain, and you've explicitly chosen to add the same button).
但是，如果您还通过单击按钮重定向到另一个页面，则无论如何都不应该成为问题，因为原始页面上的任何 jQuery 都不会执行/能够访问用户重定向到的页面（除非它是您自己域中的一个页面，并且您已明确选择添加相同的button)。
回答by Puneet
If you give absolute positions to your div's such that - 1st is positioned at top left corner and other is positioned at top right corner. And then in click event you can change the position of the other top corner of the div to be expanded.
如果您为 div 提供绝对位置，则 - 1st 位于左上角，其他位于右上角。然后在单击事件中，您可以更改要展开的 div 的另一个顶角的位置。
You can use jquery to do this easily. Check jquery documentationfor setting css.
您可以使用 jquery 轻松完成此操作。检查jquery 文档以设置 css。
回答by Anand Sankho Mallik
Looks like you've got jQuery included, so use that! It's totes the easiest library to do simple animations with.
看起来你已经包含了 jQuery，所以使用它！它是制作简单动画的最简单的库。
Here's an example click function that will slide the right background to be 100% like you said:
这是一个示例单击功能，它将像您说的那样将右侧背景滑动到 100%：
$('a#link').click(function(e) {
e.preventDefault();
$('#left-bg').animate({ width : '0%' }, 'slow');
$('#right-bg').animate({ width : '100%' }, 'slow');
});
Obviously to go in the other direction you'd switch the width values in the object passed to the animate functions.
显然，在另一个方向上，您需要切换传递给 animate 函数的对象中的宽度值。
If you're not familiar with the animate function, check the docs, but basically you just pass CSS rules in a key : value object to it, and it'll change the CSS values over time - animating it!
如果您不熟悉 animate 函数，请查看文档，但基本上您只需将 CSS 规则传递给 key : value 对象，它会随着时间的推移更改 CSS 值 - 对其进行动画处理！
Hope this helps!
希望这可以帮助！
