Question

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

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

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

如何让它只是水平隐藏？

Answer 1

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 2

你应该看看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 3

你需要jquery UI效果

http://jqueryui.com/hide/

尝试隐藏幻灯片效果。

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

Answer 4

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

示例：

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

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

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

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

4 个答案: