Jquery滑动到可见性隐藏？

Question

我想要实现类似的目标：

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

但是我不希望隐藏 div，我希望它保留空间，所以我希望隐藏可见性，例如：

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

但仍然达到与上面相同的效果。

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

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

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

Answer 3

您可以用非常简单的方式做到这一点。 这里确实有一个很好的教程< /strong> 以不同方向制作动画。它一定会对你有所帮助。试试这个

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

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

编辑：< /strong> 另一种解决方案，这非常简单，可以将 div 移出窗口并使用左边距

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

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