[英]slide right from left with jquery
I'm using this fiddle for a my project but I want to make targets slide from right to left. 我正在为我的项目使用这个小提琴,但我想使目标从右向左滑动。 If you check the link link you can see the targets divs are sliding form left to right. 如果检查链接链接,可以看到目标div从左到右滑动。
jQuery(function ($) {
$('a.panel').click(function () {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active');
if (!$target.hasClass('active')) {
$other.each(function (index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: $this.width()
}, 500);
});
$target.addClass('active').show().css({
left: -($target.width())
}).animate({
left: 0
}, 500);
}
});
});
http://jsfiddle.net/sg3s/rs2QK/ here is a demo. http://jsfiddle.net/sg3s/rs2QK/这是一个演示。
Please help I really appreciate it. 请帮助我,我真的很感激。
The only quick and dirty option I found was to play with zIndex and reposition non-active elements with right
when animation completes. 我发现的唯一快速而肮脏的选择是使用zIndex并在动画完成时right
重新定位非活动元素。
jQuery(function($) {
$('a.panel').click(function(e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$other = $target.siblings('.panel');
if (!$target.hasClass('active')) {
$other.css({zIndex: 1});
$target.addClass('active').show().css({
right: -$target.width(),
zIndex: 2
}).animate({
right: 0
}, 500, function() {
$other.removeClass('active').css({
right: -$other.first().width()
});
});
}
});
});
Another way to filter siblings is: 筛选兄弟姐妹的另一种方法是:
var href = $(this).attr('href');
var idStr = href.replace(/[#\d]+/g, ''); // = 'target'
var $other = $target.siblings("[id^='" + idStr + "']"); // siblings with id that starts with 'target'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.