2

ここのようにspecialist_pagecontent左から表示（スライド）させたいのですが、これでは動かせません。実際には、計画は理想的ではなく、必要ではありませんが、私が言ったように、blindLeftOutとblindLeftInを機能させることはできません。blindleftinhide()blindLeftOut('fast');hide()show()show();blindLeftOut('slow')

4

2 に答える 2

4

jQueryのanimate関数が役立つかもしれないと思います。

あなたがする必要があるのは、ウィンドウの外に隠されたdivをHTMLに追加すること（またはdocument.ready、必要に応じてjquery on eventを使用して動的に追加すること）と、上記のanimate関数を使用してスライドさせることです。アウトして、メニュー項目のクリック機能にバインドします。

ワーキングフィドル

これがあなたのために働くJSFiddleです

于 2012-12-21T23:16:07.410 に答える
1

アニメーション化する要素を出し入れしviweportます。内部の要素を確認するために使用するレイヤー。次に、このプロパティをに設定し、特定viewportの幅/高さを指定します。overflowhidden

このようにして、要素をアニメーション化して、viewportスライドイン/スライドアウトしているように見せることができます。

JSに加える変更は次のとおりです。

//notice the use of the "active" class to save state
$('.specialist_pagecontent').eq(0).addClass("active").animate({ left : 0 }, 500);
$('.specialist').click(function() {  
    //stop() is used to stop the current animation, so animations don't queue up if many buttons are clicked rapidly
    $('.specialist_pagecontent').filter(".active").removeClass("active").stop(true).animate({ left : '-100%' }, 500); 
    $('.selected-specialist').removeClass('selected-specialist');
    $(this).addClass('selected-specialist');
     $('.specialist_pagecontent').eq($(this).index('.specialist')).addClass("active").stop(true).animate({ left : 0 }, 500);
});

そして、これがCSSに対する私の提案された編集です：

.specialist_pagecontent {
    position:absolute;
    top:0;
    left:-100%;
}
#specialist_lists {
    float:left;
    border: 1px solid #000000;
    position:relative;
    width:200px;
    height:200px;
    overflow:hidden;
}

これがデモです：http：//jsfiddle.net/Jwkw6/1/

これにより、アニメーション化される要素が完全に配置されます。これは、ドキュメントの通常のフローから要素を削除するため、非常に便利です（つまり、アニメーション化時にページ全体の再描画がトリガーされることはありません）。これはまた、viewport私が言及したものを作成し、アニメーションを見るために見るウィンドウを作成します。

于 2012-12-21T23:12:42.820 に答える