Jquery幻灯片如何实现visibility hidden效果？

Question

我希望实现类似以下的功能：

$("#left").hide('slide', {direction: 'right'}, 1000)

然而，我不想隐藏div，我希望它保留空间，所以我想使用visibility:hidden，如下所示：

$("#left").css('visibility','hidden')

然而仍然能够达到与上述相同的效果。

- Jonovono

Answer 1

这是我的做法。

$parent = $('#left').parent(); //store the parent of the element in a variable
$('#left').clone() //clone the existing element
.appendTo($parent) // insert it into the current position
.css('visibility','hidden') //set it's visibility to hidden
.end().end() //target the initial element
.slideUp() //do any slide/hide/animation that you want here, the clone will always be there, just invisible

这可能很糟糕，但这是我能想到的解决问题的唯一方法 :)

- leopic

Answer 2

示例：http://jsfiddle.net/skyrim/j2RWt/4

尝试这个：

var $content = $("#left");
var offset = $content.offset();
$("<div></div>").css({
    width: 0,
    position: "absolute",
    left: offset.left,
    top: offset.top,
    height: $content.outerHeight(),
    backgroundColor: "White"
}).appendTo("body")
.animate({
    width: $content.outerWidth()
}, 1000, function () {
    $content.css('visibility', 'hidden');
    $(this).remove();
});

---

编辑

所以，在了解实际需求后 (:p)，这种方法基本上是在原始元素上放置另一个 div。我已经在 IE 上进行了测试...在其他浏览器上进行进一步测试后，我将通过更新进行编辑！

---

编辑

只有Chrome似乎在获取正确的高度方面存在问题。

---

添加了一个回调函数，该函数将使元素的可见性变为隐藏状态（正如LEOPiC所建议的那样），并移除滑出的div。

- Skyrim

---

我认为原帖作者真正想要的是向右滑动的效果，而不仅仅是隐藏元素。 - leopic

@LEOPiC - 啊，我明白了...谢谢你的建议。 - Skyrim

Answer 3

你可以用非常简单的方法来实现它。这里真的有一个很好的教程在这里，可以让你以不同的方向进行动画制作。它一定会对你有所帮助。试试看吧。

$('#left').animate({width: 'toggle'});

示例：http://jsfiddle.net/2p3FK/2/

编辑：另外一个解决方案，使用左边距非常简单地将div移出窗口。

$("#left").animate({marginLeft:'1000px'},'slow'); 

例子：http://jsfiddle.net/2p3FK/1/

- dku.rajkumar