1

水平方向にスライドインおよびスライドアウトしようとしているいくつかの基本的なパネルを設定しました。ページが読み込まれたときに最初のパネルを除くすべてのコンテンツを非表示にし、他のパネルへのリンクをクリックすると、現在表示されているコンテンツが左にスライドして非表示になり、新しいコンテンツがスライドして表示されます。ページの中央など。現時点では、私が持っているボックスの配置は私と協力していません。

デモはここでチェックアウトできます：

http://jsfiddle.net/fE8ks/

ありがとう！

4

2 に答える 2

0

本当に左にマージンを持って要素を配置する必要がありますか？単にそれらを非表示にすることが機能する場合、効果を発揮するコードは非常に単純です。

$(document).ready(function() {
$('#container').css({position:'relative'});
    $("#container div:not(:first)").hide();
    $('.div1').addClass('current');
    $("nav a").click(function() {
        var cls = this.name;
        $('.current').removeClass('current').animate( { width: "hide", paddingLeft: "hide", paddingRight: "hide", marginLeft: "hide", marginRight: "hide" }, 500, function() {
            $('.'+cls).addClass('current').animate( { width: "show", paddingLeft: "show", paddingRight: "show", marginLeft: "show", marginRight: "show" }, 500);
        });
        return false;
    });
});

このバージョンもあなたのフィドルに入れました：http：//jsfiddle.net/fE8ks/1/

于 2011-12-09T06:37:00.187 に答える
0

Firefoxではすべてが正常に機能しているようですが、不足しているのは、選択したスライド列を一番上に設定する.currentクラスにz-index属性が適用されることだけです。それ以外の問題がある場合は、スクリーンショットを表示するか、問題が発生しているブラウザのバージョンを教えてください。複製できますか？

于 2011-12-09T06:18:43.707 に答える