jQuery-在显示滑动面板时为绝对定位的div的“左"位置设置动画 [英] jQuery - animating 'left' position of absolutely positioned div when sliding panel is revealed
问题描述
我在屏幕左侧有一个隐藏的面板,单击位于屏幕左侧的选项卡",即可滑入视图.我需要面板在现有页面内容的顶部滑动,并且我需要标签随其移动.因此,两者都绝对位于CSS中.一切正常,除了我需要选项卡(因此需要选项卡容器)在显示时随面板向左移动,因此它似乎卡在面板的右侧.当使用浮点数时,它相对简单,但是当然,这会影响现有内容的布局,因此会影响绝对定位.我曾尝试对面板容器的左侧位置进行动画处理(请参见记录的jquery函数),但无法使其正常工作.
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.
这是我已更改的原始代码的示例,如何使按钮/选项卡也能滑动?
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
我的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>
我的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
});
});
});
这是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;
}
非常感谢
推荐答案
我再次从头开始,实际上阅读了jQuery文档.我将面板和按钮都放在一个绝对定位的div中,将它们都向左浮动.给容器一个负的左位置,然后在按钮上放置一个jQuery切换操作.
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.
$('#button').toggle(function() {
$('#slider').animate({
left: '+=200'
}, 458, 'swing', function() {
// Animation complete. CALLBACK?
});
}, function() {
$('#slider').animate({
left: '-=200'
}, 458, 'swing', function() {
// Animation complete. CALLBACK?
});
});
这篇关于jQuery-在显示滑动面板时为绝对定位的div的“左"位置设置动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!