ターゲット位置にある要素をスムーズに押しのけながら、スライドさせて要素の可視性を切り替える方法を探しています。
今まで、jQueryとjQuery Uiの両方のスライド効果を試しましたが、これら 2 つのブレンドが必要なようです。
jQueryのスライドは問題の要素を引き伸ばしますが、コンテナー内のように( jQuery Uiのように)スライドインおよびスライドアウトしたいと思います。残念ながら、jQuery Uiは、アニメーション中に隣接する要素を再配置しませんが、アニメーションが終了すると、隣接する要素をその場所にジャンプさせます。overflow: hidden
私が言いたいことを示すためにFiddleを作成しました。私の質問は次のとおりです。後続の要素がその場所にジャンプせずにjQuery Uiにスライドを配置し、代わりにスムーズに移動する方法はありますか?
アドバイスありがとうございました！
ありがとう、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 を追加して、その高さを設定できます。