问题描述
|
我在侧边栏(左和右)工作,可以使用jQuery滑出/滑入。
双方都可以,但是右侧边栏会向左滑动,而不是向右滑动。
我使用以下jQuery代码:
jQuery(function ($) {
var left_open = true;
var right_open = true;
$(\'a#ToogleSidebarLeft\').click(function () {
if (left_open === true) {
$(\'#Boxwrapper-left\').animate({ width: \'hide\' });
$(\'#leftcolumn\').animate({ width: \'hide\' });
$(\"#maincontent\").animate({ marginLeft: \"0px\" });
left_open = false;
} else {
$(\'#Boxwrapper-left\').animate({ width: \'show\' });
$(\'#leftcolumn\').animate({ width: \'show\' });
$(\"#maincontent\").animate({ marginLeft: \"220px\" });
left_open = true;
}
});
$(\'a#ToogleSidebarRight\').click(function () {
if (right_open === true) {
$(\'#Boxwrapper-right\').animate({ width: \'hide\' });
$(\'#rightcolumn\').animate({ width: \'hide\' });
// $(\'#Boxwrapper-right\').hide(\'slide\',{width: \'hide\',direction: \'right\' });
// $(\'#rightcolumn\').hide(\'slide\',{ width: \'hide\',direction: \'right\' });
$(\"#maincontent\").animate({ marginRight: \"0px\" });
right_open = false;
} else {
$(\'#Boxwrapper-right\').animate({ width: \'show\' });
$(\'#rightcolumn\').animate({ width: \'show\' });
$(\"#maincontent\").animate({ marginRight: \"200px\" });
right_open = true;
}
});
});
如何将第二个函数(ToogleSidebarRight)的滑动方向更改为右移?
我已经尝试过类似的方法,但是它不起作用:
$(\'#Boxwrapper-left\').animate({ width: \'hide\',direction: \'right\' });
感谢您的帮助!
PS:英语不是我的母语,所以文本看起来可能有点奇怪...
解决方法
$(\"#maincontent\").animate({ marginRight: \"-200px\" });
我认为负值保证金会起作用。
或将其更改为
$(\"#maincontent\").animate({ marginLeft: \"200px\" });
,有很多可用的示例...我希望您可以提取所需的片段...
最后,我们可以达到相同的目的
作为左动画的效果
设置marginLeft属性的动画。在
在这种情况下,我们仍然需要溢出:
隐;在父元素上,但是
滑动元件不需要
定位。
$(document).ready(function() {
$(\'#slidemarginleft button\').click(function() {
var $marginLefty = $(this).next();
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css(\'marginLeft\'),10) == 0 ? $marginLefty.outerWidth() : 0
});
});
});