jquery - jQuery水平动画而不是垂直动画

Question

我有 2 个带有内容的标签，一个左窗格和一个右窗格。当您单击一个按钮时，我需要左窗格消失。这很简单，我这样做：

$("#leftPanel").hide(800);

工作正常，但是，左窗格中的内容垂直隐藏，然后右窗格水平滑动。

我如何让它水平隐藏自己？

Answer 1

你应该看看 jQuery 的原生动画函数：

// Slide closed and hide
$('#element').animate({
    width: '0px' // no width
}, 1000, function() {
    $(this).hide();
});

// Show and slide back open
$('#element').show().animate({
    width: '100px' // full width in pixels
}, 1000);

Answer 2

该hide方法可以接受缓动效果、自定义和持续时间。

您可以通过向左滑动来混合它们以获得相似的图形行为

文档：http ://api.jquery.com/hide/

代码：

$("#hideme").click(function () {
    $(".obj2").hide('slide', { direction: 'left' }, 800);
});

$("#showme").click(function () {
    $(".obj2").show('slide', '', 800);
});

演示：http: //jsfiddle.net/IrvinDominin/veER4/

Answer 3

你需要 jquery UI 效果

http://jqueryui.com/hide/

试试隐藏幻灯片效果。

$("#leftPanel").hide("slide");

Answer 4

使用 css 进行翻译transform: translateX()

例子：

element{
/* Start hidden */
transition: 0.5s;
transform: translateX(110%);}

element.active{
/* Showing the element */
transition: 0.5s;
transform: translateX(0%);}

并在 javascript 中的 click 事件中切换活动类