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

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

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

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

编辑：还有一个解决方案，使用left margin将窗口移出窗口非常简单

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

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

Jquery滑动到可见性隐藏？

3 个答案: