-1

過去数か月間、次のようにページの端にあるものを表示/非表示にしてきました。

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

これはかなりうまく機能し、ページから div をうまくスライドさせます。

完全な実装については、http: //jsfiddle.net/9Vmj7/を参照してください。

リンクをクリックすると、画面から出るまでテキストが押しつぶされて押しつぶされていることに気づきましたか? これを行わない実装が必要です。

今、私は上記のコードが使用していることを知っています。"width: 'toggle'"これは、1000 ミリ秒で 100% 幅から 0% 幅になることを意味します。

実際にdivを縮小するのではなく、視覚的な「ファンキーさ」を持たずにdivを画面から移動する実装を探しています。

ありがとう。

4

3 に答える 3

2

クロスブラウザーで正しく動作するようにバージョンを更新しました:

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

フィドル

于 2012-10-18T17:50:55.413 に答える
1

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>

于 2012-10-18T17:53:48.160 に答える
1

これを使用するのはどうですか：

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

jsフィドル

于 2012-10-18T17:55:11.950 に答える