[英]Sliding Panels with JavaScript
我找到的这个示例正是我要寻找的: http://jsfiddle.net/sg3s/RZpbK/
感谢作者sg3s
jQuery(function($) {
$('a.panel').click(function() {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active'),
animIn = function () {
$target.addClass('active').show().css({
right: -($target.width())
}).animate({
left: 0
}, 500);
};
if (!$target.hasClass('active') && $other.length > 0) {
$other.each(function(index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: -$this.width()
}, 500, animIn);
});
} else if (!$target.hasClass('active')) {
animIn();
}
});
});
但是我有一点问题。 我希望面板从右侧“打开”和“关闭”。 我对javascript不熟悉,无法正确调整。
谁能帮我这个 ?
像这样?
http://jsfiddle.net/RZpbK/845/
我所做的就是将animIn修改为:
animIn = function () {
$target.addClass('active').show().css({
left: +($target.width())
}).animate({
left: 0
}, 500);
};
只需将两个位置的left: -($target.width())
替换为left: $target.width()
根据您之前的评论,这是您想要的吗?
http://jsfiddle.net/RZpbK/847/
只需对其进行更改,以便animIn立即执行,而不是在淡出完成后作为回调执行。
$this.removeClass('active').animate({
left: -$this.width()
}, 500);
animIn();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.