使用 jQuery 将 DIV 从右向左滑动

Question

我正在使用jQuery代码在加载时将一个div从左到右进行动画处理，然后通过单击关闭按钮将该div从右到左隐藏。它运行良好，只是水平方向上不是从左到右，而是斜向移动。我做错了什么？这是我使用的代码示例： http://jsfiddle.net/N8NpE/2/。

$(function(){
    $("#content-box").hide(0).delay(0).show(500);
});

$(function(){
    $("#ClosePanel").click(function () {
        $("#content-box").hide("slow");
    });
});

非常感谢您的帮助。

- Mr. Bacan

Answer 1

你可以尝试使用.animate()代替.hide()和.show()。这将让你对所有内容有更多的控制。

$("#content-box").animate({'width': 240},500);

并且，在最后，需要包含一个回调函数来在动画完成后将显示设置为无：

$("#content-box").animate({'width': 0},500,function(){
       $("#content-box").css('display','none');
});

http://jsfiddle.net/N8NpE/6/

- Blake Mann

---

所有发布的技术都有效，但我更喜欢这个，因为正如你所说，它提供了更多的控制。唯一的问题是它不是滑动式的，它只是显示出来，关闭时确实向右滑动，但它会挤压文本而不是真正地滑动它。这是我使用脚本的链接：http://www.azurpanama.com/index.php?page=fullbg-test - Mr. Bacan

在 CSS 中，您必须最初在该元素上指定宽度为 0，作为动画的起点。至于“挤压”文本，为了避免这种情况，您需要在文本周围设置一个具有固定宽度的包装器，然后在内容框（正在进行动画的元素，而不是其具有固定宽度的子元素）上设置 overflow: hidden;。这样，内容框将缩小宽度，但其内容将保持固定宽度。 - Blake Mann

非常感谢，Blake。它运行得很好。不过有一个小问题。在盒子向右滑动之前，我需要添加5秒的延迟，所以我在代码“$('#content-box').delay(5000).animate({'width': 300},1000);”中添加了.delay(5000)，现在它首先显示文本，然后在5秒后消失并开始动画，就像应该做的那样。这是示例。 - Mr. Bacan

overflow: hidden; CSS需要应用在ID为content-box的div上。这是保持文本不可见的方法，直到盒子的宽度足够大以使文本可见。 - Blake Mann

Answer 2

你需要在脚本中包含jQuery UI，并稍微修改你的函数：

$(function(){
$("#content-box").hide(0).delay(0).toggle('slide', {
        direction: 'left'
    }, 1000);
});

这里有一个更新的jsfiddle: http://jsfiddle.net/N8NpE/4/

- Maxim Ershov

---

谢谢Maxim，这段代码很有效并且非常有帮助，但是我正在尝试减少页面中的脚本加载。不过我肯定会在其他项目中使用它。 - Mr. Bacan

Answer 3

$('#content-box').animate({width: 'toggle'});

$（'#content-box'）.animate（{width：'toggle'}）;

http://jsfiddle.net/U7wGt/

- Joseph

---

和其他的一样，这个也可以工作，但我正在尝试减少加载代码的使用。感谢你的帮助 Joseph。 - Mr. Bacan