jQuery - 显示滑动面板时为绝对定位的 div 的“左”位置设置动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2665368/
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
jQuery - animating 'left' position of absolutely positioned div when sliding panel is revealed
提问by Matt
I have a hidden panel off the left side of the screen which slides into view on the click of a 'tab' positioned on the left side of the screen. I need the panel to slide over the top of the existing page content, and I need the tab to move with it. and so both are absolutely positioned in css. Everything works fine, apart from I need the tab (and thus the tab-container) to move left with the panel when it is revealed, so it appears to be stuck to the right-hand-side of the panel. Its relatively simple when using floats, but of course this affects the layout of the existing content, hence absolute positioning. I have tried animating the left position of the panel-container (see the documented jquery function), but I cant get it to work.
我在屏幕左侧有一个隐藏面板，单击位于屏幕左侧的“选项卡”即可滑入视图。我需要面板滑过现有页面内容的顶部，我需要标签随它移动。所以两者都绝对定位在 css 中。一切正常，除了我需要选项卡（以及选项卡容器）在显示时随面板向左移动，因此它似乎粘在面板的右侧。使用浮动时相对简单，但这当然会影响现有内容的布局，因此绝对定位。我曾尝试为面板容器的左侧位置设置动画（请参阅记录的 jquery 函数），但我无法让它工作。
This is an example of the original code which i have changed, how can I get the button/tab to slide aswell?
这是我更改的原始代码的示例，如何让按钮/选项卡也滑动？
http://www.iamkreative.co.uk/jquery/slideout_div.html
http://www.iamkreative.co.uk/jquery/slideout_div.html
My HTML
我的 HTML
<div><!--sample page content-->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
</p>
</div>
<div id="panel" class="height"> <!--the hidden panel -->
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div>
<!--if javascript is disabled use this link-->
<div id="tab-container" class="height">
<a href="#" onclick="return()">
<div id="tab"><!-- this will activate the panel. --></div>
</a>
</div>
My jQuery
我的jQuery
$(document).ready(function(){
$("#panel, .content").hide(); //hides the panel and content from the user
$('#tab').toggle(function(){ //adding a toggle function to the #tab
$('#panel').stop().animate({width:"400px", opacity:0.8}, 100, //sliding the #panel to 400px
// THIS NEXT FUNCTION DOES NOT WORK -->
function() {
$('#tab-container').animate({left:"400px"} //400px to match the panel width
});
function() {
$('.content').fadeIn('slow'); //slides the content into view.
});
},
function(){ //when the #tab is next cliked
$('.content').fadeOut('slow', function() { //fade out the content
$('#panel').stop().animate({width:"0", opacity:0.1}, 500); //slide the #panel back to a width of 0
});
});
});
and this is the css
这是CSS
#panel {
position:absolute;
left:0px;
top:50px;
background-color:#999999;
height:500px;
display:none;/*hide the panel if Javascript is not running*/
}
#panel .content {
width:290px;
margin-left:30px;
}
#tab-container{
position:absolute;
top:20px;
width:50px;
height:620px;
background:#161616;
}
#tab {
width:50px;
height:150px;
margin-top:100px;
display:block;
cursor:pointer;
background:#DDD;
}
Many thanks
非常感谢
回答by Matt
I started again from scratch, and actually read the jQuery docs hehe. I put both the panel and the button in an absolutely positioned div, floating them both left. Gave the container a negative left position, then put a jQuery toggle action on the button.
我从头开始，实际上阅读了 jQuery 文档，呵呵。我将面板和按钮放在一个绝对定位的 div 中，将它们都向左浮动。给容器一个负向左位置，然后在按钮上放置一个 jQuery 切换动作。
$('#button').toggle(function() {
$('#slider').animate({
left: '+=200'
}, 458, 'swing', function() {
// Animation complete. CALLBACK?
});
}, function() {
$('#slider').animate({
left: '-=200'
}, 458, 'swing', function() {
// Animation complete. CALLBACK?
});
});
回答by Ted A.
I stumbled across this post when trying to accomplish the same task.
我在尝试完成相同的任务时偶然发现了这篇文章。
Unfortunately Matt's answer will no longer work with the latest version of jQuery. At the time Matt's answer was written, jQuery had two .toggle functions. At the time I am writing this the one utilized in his answer has been deprecated. If Matt's code is used, the entire div will just disappear, button and all. (And if you are like me that will be very confusing until you dig in to the api documentation and find out about the change)
不幸的是，马特的回答将不再适用于最新版本的 jQuery。在撰写 Matt 的答案时，jQuery 有两个 .toggle 函数。在我写这篇文章的时候，他的回答中使用的那个已经被弃用了。如果使用 Matt 的代码，整个 div 将消失，按钮等等。（如果您像我一样，在深入研究 api 文档并了解更改之前会非常困惑）
I was able to get my functionality working with the following code:
我能够使用以下代码获得我的功能：
HTML:
HTML：
<div id="siteMap">
<div id="mapButton">Site Map</div>
<div id="theMap">[The Site Map Goes Here]</div>
</div>
CSS (I know this isn't very clean yet):
CSS（我知道这还不是很干净）：
#siteMap {
width:500px;
position:fixed;
left:-500px;
top:157px;
display:block;
color:#FFF;
z-index:2;
opacity: 0.95;
}
#siteMap #mapButton {
display:block;
color:#333;
background-color:#ACACAC;
padding:2px 5px;
height:20px;
width:70px;
text-align:center;
position:relative;
left: 100%;
margin-top:80px;
cursor:pointer;
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
#siteMap #theMap {
width:100%;
height:350px;
background-color:#666;
margin-top:-104px;
}
And lastly the JavaScript:
最后是 JavaScript：
<script type='text/javascript'>
$(document).ready(function() {
$('#mapButton').click(function() {
var mapPos = parseInt($('#siteMap').css('left'), 10);
if (mapPos < 0) {
$('#siteMap').animate({
left: '+=500'
}, 458, 'swing', function() {
// Animation complete.
});
}
else {
$('#siteMap').animate({
left: '-=500'
}, 458, 'swing', function() {
// Animation complete.
});
}
});
});
</script>
Hopefully if you came here from Google my post will be helpful :)
希望如果你从谷歌来到这里，我的帖子会有所帮助:)
