我正在寻找一种通过滑动元素来切换元素可见性的方法，同时平滑地推开那些位于目标位置的元素。
到目前为止，我尝试了jQuery和jQuery Ui的两种幻灯片效果，似乎我需要将这两者结合起来。
而jQuery的幻灯片拉伸有问题的元素，我宁愿希望它像在容器中一样滑入和滑出overflow: hidden（就像jQuery Ui一样）。不幸的是，jQuery Ui不会在动画期间重新定位相邻元素，而是在动画完成后让它们跳转到它们的位置。
我创建了一个Fiddle来向您展示我的意思。我的问题是：有没有办法让jQuery Ui中的幻灯片没有后续元素跳转到它的位置，而是平稳地移动到那里？
非常感谢您的建议！
我借鉴了ManseUK的想法，扩展了jQuery Ui的常规幻灯片效果，在幻灯片动画期间调整了自动创建的 wrapper div 的高度。
$.effects.customSlide = function(o) {
return this.queue(function() {
// Create element
var el = $(this),
props = ['position', 'top', 'bottom', 'left', 'right'];
// Set options
var mode = $.effects.setMode(el, o.options.mode || 'show'); // Set Mode
var direction = o.options.direction || 'left'; // Default Direction
// Adjust
$.effects.save(el, props);
el.show(); // Save & Show
$.effects.createWrapper(el).css({
overflow: 'hidden'
}); // Create Wrapper
var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left';
var motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg';
var distance = o.options.distance || (ref == 'top' ? el.outerHeight({
margin: true
}) : el.outerWidth({
margin: true
}));
if (mode == 'show') el.parent().css('height', 0);
if (mode == 'show') el.css(ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance); // Shift
// Animation
var animation = {};
animation[ref] = (mode == 'show' ? (motion == 'pos' ? '+=' : '-=') : (motion == 'pos' ? '-=' : '+=')) + distance;
el.parent().animate({
height: (mode == 'show' ? distance : 0)
}, {
queue: false,
duration: o.duration,
easing: o.options.easing
});
el.animate(animation, {
queue: false,
duration: o.duration,
easing: o.options.easing,
complete: function() {
if (mode == 'hide') el.hide(); // Hide
$.effects.restore(el, props);
$.effects.removeWrapper(el); // Restore
if (o.callback) o.callback.apply(this, arguments); // Callback
el.dequeue();
}
});
您可以在此Fiddle中查看结果。
谢谢你，jnns。做得好！
这是您的解决方案，针对 jQuery UI 版本 1.9 进行了更新。
$.effects.effect.customSlide = function (options) {
var el = $(this),
props = ['position', 'top', 'bottom', 'left', 'right'];
// Set options
var mode = $.effects.setMode(el, options.mode || 'show'); // Set Mode
var direction = options.direction || 'left'; // Default Direction
// Adjust
$.effects.save(el, props);
el.show(); // Save & Show
$.effects.createWrapper(el).css({
overflow: 'hidden'
}); // Create Wrapper
var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left';
var motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg';
var distance = options.distance || (ref == 'top' ? el.outerHeight(true) : el.outerWidth(true));
if (mode == 'show') el.parent().css('height', 0);
if (mode == 'show') el.css(ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance); // Shift
// Animation
var animation = {};
animation[ref] = (mode == 'show' ? (motion == 'pos' ? '+=' : '-=') : (motion == 'pos' ? '-=' : '+=')) + distance;
el.parent().animate({
height: (mode == 'show' ? distance : 0)
}, {
queue: false,
duration: options.duration,
easing: options.easing
});
el.animate(animation, {
queue: false,
duration: options.duration,
easing: options.easing,
complete: function () {
if (mode == 'hide') el.hide(); // Hide
$.effects.restore(el, props);
$.effects.removeWrapper(el); // Restore
if (options.callback) options.callback.apply(this, arguments); // Callback
el.dequeue();
}
});
};
您可以添加一个包含 DIV 并设置其高度：