Jquery幻灯片到可见性隐藏？答案

【问题标题】：Jquery slide to visibility hidden?Jquery幻灯片到可见性隐藏？
【发布时间】：2012-01-12 05:34:14
【问题描述】：

我想达到这样的目标：

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

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

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

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

【问题讨论】：

标签： javascript jquery css jquery-ui jquery-plugins

【解决方案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

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

【讨论】：

【解决方案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

【讨论】：

我认为 OP 真的希望滑出到正确的效果，而不仅仅是隐藏元素。
@LEOPiC - 啊，ic...thnx 用于输入

【解决方案3】：

您可以通过非常简单的方式做到这一点。确实有一个很好的教程 here 可以在不同方向上制作动画。它肯定会帮助你。试试这个

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

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

编辑：另一种解决方案，使用left margin将div移出窗口非常简单

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

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

【讨论】：