jQuery水平动画不垂直

Question

我有2个带内容的标签，左右两个窗格。当你点击按钮时，我需要让左边的窗格消失。这很简单，我可以通过以下方式实现：

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

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

我该如何使其仅水平隐藏？

- mmaceachran

---

请发布一个完整的示例。 - j08691

Fiddle也可以是一个不错的选择。 - Dhaval Marthak

相关问题：https://dev59.com/PmTWa4cB1Zd3GeqPH-7s - Lee Meador

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);

- Matthew R.

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/

- Irvin Dominin

Answer 3

使用CSS进行平移，可以使用 transform: translateX()

例如：

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

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

在JavaScript中，单击事件会切换活动类。

- Lukan Dos Santos Pinto

Answer 4

你需要jQuery UI效果来实现这个。

http://jqueryui.com/hide/

尝试使用隐藏幻灯片效果。

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

- SoWhat