web-dev-qa-db-ja.com

JQueryを使用したdivの水平スライド

だから私はJavascriptとJqueryを初めて使います。私が作成したいのは、左の列のリンクが右のdivを左から右に水平にスライドさせ、もう一度クリックすると表示されない2列のページです。私はスライドトグル効果を使用する必要があることを知っていますが、個々のリンクが異なるdivをスライドさせるように実装するのに問題があります...私はGoogle検索で見つけたjsfiddleをいくつか調整しようとしましたjavascriptに関して言えば、私はかなり迷っています。

これまでのところ、これは私がうまく調整できた唯一のフィドルです... http://jsfiddle.net/bridget_kilgallon/HAQyK/
これらは垂直にスライドし、クリックするとすべてのdivを読み込みます。

これは、javascriptを使用せずにページレイアウト用に作成したフィドルです... http://jsfiddle.net/bridget_kilgallon/NhanG/

助けてください！ :)-ブリジット

jquerytoggleslide
15
Bridget Kilgallon

残念ながら、jQueryを使用した既製の「水平」スライドアニメーションはありません。 jQuery UIのような大きなパッケージを使用する場合を除きます。しかし、私はそれが必要だとは思わない。

必要なのは、jQueryで animate() 関数を創造的に使用して効果を実現することだけです。

説明があいまいだったので、どちらに行きたいかわからなかったので、パネルスイッチングの軽微な影響について2つの例を作成しました。

http://jsfiddle.net/sg3s/rs2QK/ -これはスライドパネルを左から開き、右にスライドする

http://jsfiddle.net/sg3s/RZpbK/ -新しいパネルを開く前に、パネルが左から右に開き、左に閉じます。

リソース：

純粋なCSSでこれを行うことはできませんが、まだとにかくできません。トランジションのサポートは基本的であり、Webkitベースのブラウザーのみに限定されています。そのため、jQueryはjQueryをスマートに使用する必要があるため、JSを使用する前に、cssで可能な限りスタイルを設定する必要があります。 JSでは視覚的なスタイリング/操作を使用しないことに注意してください。

35
sg3s

JavaScriptを使用しない場合、CSSトランジションを使用できる場合にのみ使用できます。そして、これらは非常に印象的ですが、私がまだ見つけた限りでは、条件付きアニメーションに関しては特に素晴らしいというわけではありません。基本的に、開始点から別の点に移動してから（ブラウザ自体で利用可能なネイティブブラウザイベントに基づいて）戻ることができます。JSを使用すると、追加のクラスを追加/削除し、div要素をあなたの心は満足していますが、「ちょうど」CSSではありません（これについては間違っていると証明されたいです）。

これまでに思いついた最高のものは、次のとおりです。

_#left {
    float:left;
    width:200px;
}
.right {
    height: 0;
    background-color: #fff;
    margin-left: 205px;
    overflow: hidden;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}
.right:target {
    display: block;
    height: 5em;
    background-color: #ffa;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}​
_

JS Fiddle demo 。

また、要素の幅が変更されたときにコンテンツのリフローが発生したため、見た目が良くなかったため、これは横からスライドしません（必要に応じて行うことができます）。

Edited元の質問の一部を誤って解釈した可能性があると思うので：

... javascriptなしで欲しい

それが事実であり、コメント（下記）はjQueryが適切なオプションであることを示唆しているようです。これはデモンストレーションとして価値があるかもしれません。

_​$('#left a').click(
    function(){
        var div = $('div').not('#left').eq($(this).index('#left a'));
        var others = $('div[data-visible="true"]');
        others.each(
            function(){
                $(this).animate({
                    'left' : '2000px'
                },1000,function(){
                    $(this).removeAttr('style data-visible');
                });
            });
        if (div.attr('data-visible')) {
            div.animate({
                'left' : '2000px'
            },1000,function(){
                $(this).removeAttr('style data-visible');
            });
        }
        else {
            div.animate({
                'left' : '210px'
            },1000).attr('data-visible',true);
        }
    });​​​​​​​​
_

JS Fiddle demo 。

参照：

2
David Thomas

JQuery UIからeffectsモジュールを使用し、show('slide')を使用できます。見て http://jsfiddle.net/HAQyK/1/

1
elclanrs

必要なコードは次のとおりです。 IE、Safari、Chrome、Firefoxなどで動作することが証明されています。

これがHTML部分です。

    <div id="slide-wrap" style="width:1000px; height:200px; overflow:hidden; padding:0 auto;">
        <div id="inner-wrap" style="float:left;">
            <!-- 'Put Inline contains here like below.' -->
            <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
            <!--  ...  -->
            <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
            <!-- 'Put Inline contains here like above.' -->
        </div>
        <div style="display: block; width:40px; height:60px; position: absolute; margin-left:0px;   margin-top:40px">
            <img id='scroll_L_Arrow' src='../assets/img/l-arrow.png' onclick="scrollThumb('Go_L')"/>
        </div>
        <div style="display: block; width:40px; height:60px; position: absolute; margin-left:960px; margin-top:40px">
            <img id='scroll_R_Arrow' src='../assets/img/r-arrow.png' onclick="scrollThumb('Go_R')"/>
        </div>
    </div>

JavaScript関数のjQueryパーツを次に示します。

       function scrollThumb(direction) {
        if (direction=='Go_L') {
            $('#slide-wrap').animate({
                scrollLeft: "-=" + 250 + "px"
            }, function(){
                // createCookie('scrollPos', $('#slide-wrap').scrollLeft());
            });
        }else
        if (direction=='Go_R') {
            $('#slide-wrap').animate({
                scrollLeft: "+=" + 250 + "px"
            }, function(){
                // createCookie('scrollPos', $('#slide-wrap').scrollLeft());
            });
        }
       }

矢印を隠すには、こちらをご覧ください。 jQueryで水平スクロールdivの終了を検出

0
NOTSermsak
$(function () {
$("#wizardV").steps({
    headerTag: "h2",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    stepsOrientation: "vertical"
});
});

* //ウィザードはすべてのコンテンツを含むdivです

0
Cosii Riggz