Question

在过去的几个月里，我一直在页面的边缘展示/隐藏东西：

$('#myDiv').animate({ width: 'toggle' }, 1000);

这很好用，很好地将div滑出页面。

有关完整的实施，请参阅此处：http://jsfiddle.net/9Vmj7/

当您点击该链接时，请注意文本在离开屏幕之前如何搜索并压缩？我需要一个不执行此操作的实现。

现在，我知道上面的代码使用"width: 'toggle'"，这实际上意味着它在1000毫秒内从100％宽度下降到0％宽度。

我正在寻找一种实际上并没有缩小div的实现，而只是将div从屏幕上移开而没有任何视觉上的“时髦”。

感谢。

Answer 1

更新了版本，以便跨浏览器正常运行：

$(function() {
    var toHide = $('#myBox').css('overflow', 'hidden').wrapInner('<div></div>'),
        toHideInner = toHide.children(), //the just created <div> element
        width = toHide.outerWidth(),
        i = 0;
    $('#button').click(function(e) {
        e.preventDefault();
        i++;
        toHideInner.stop(true).animate({
            marginRight: (i % 2) ? -width : 0
        }, 1000);
    });
});

Fiddle

Answer 2

可以使用jQueryUI

吗？

Here's a fiddle using jQuery UI and slide

$('#button').click(function(e) {

    e.preventDefault();

    if ($("#myBox").is(":visible")) {
        $('#myBox').hide("slide", { direction: "right" }, 1000);
    }
    else {
        $('#myBox').show("slide", { direction: "right" }, 1000);
    }

}）;

Answer 3

如何使用它：

<强> HTML：

<div class="parent">
    <div id="myBox">
        I am bad and resize when I animate.
    </div>
</div>

<a href="" id="button">click me</a>

<强> CSS：

#spacer
{
    margin-top:50px;
}

div.parent{
    overflow: hidden;
}

div#myBox{
    float:right;
}

<强> JS：

$('#button').toggle(function(e) {
    e.preventDefault();
    pxl = $('#myBox').width();
    $('#myBox').stop().animate({
        'margin-right': -pxl+'px'
    }, 1000);
}, function(e){
     e.preventDefault();
    $('#myBox').stop().animate({
        'margin-right': 0
    }, 1000);    
});

jsFiddle

将div滑出页面的不同方法

3 个答案: