javascript - 将 div 滑离页面的不同方法

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);
    });
});

小提琴

Answer 2

你能用jQueryUI吗

这是一个使用 jQuery UI 和幻灯片的小提琴

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

    e.preventDefault();

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

});​</p>

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