0

スクリーンショット

矢印をクリックすると、ポートフォリオ ページの 2 つの div (添付の画像、ラップトップと電話の両方のスクリーンショット) を同時にアニメーション化/スライドする必要があります。JS プラグインをある程度理解/変更でき、HTML/CSS にかなり精通しています。特定の JS コードを記述せずにこれを行うための推奨されるプラグインまたは方法はありますか?

PS「Orbit」スライダープラグインが組み込まれているZurbのFoundationフレームワークを使用していますが、これを実行するのに十分なほどカスタマイズ可能かどうかはわかりません

4

2 に答える 2

2

jQuery のアニメーション関数は非同期で動作するため、要素のアニメーションを同時に呼び出すことができます。

var deltaW = window.innerWidth;

$('#myDiv1').animate({left : deltaW});
$('#myDiv2').animate({left : deltaW});

アニメーションが終了したときに関数をトリガーすることもできます。

$('#myDiv1').animate({left : deltaW});
$('#myDiv2').animate({left : deltaW }, function() { /*.. do something ..*/});

編集: 作業例 (css-rule の position 属性に注意してください):
http://jsfiddle.net/2gCKY/1/

于 2013-03-20T20:55:43.647 に答える
1

すぐに使える方法はありませんが、ハックすることはできます。次の軌道があるとします。

<div class="row">
    <div class="large-8 columns">
        <ul data-orbit id="slider1">
            <li>
            <img src="http://placehold.it/800x350&text=slide 1" />                
            </li>
            <li>
            <img src="http://placehold.it/800x350&text=slide 2" />                
            </li>
            <li>
            <img src="http://placehold.it/800x350&text=slide 3" />                
            </li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="large-4 columns">
        <ul data-orbit id="slider2">
            <li>
            <img src="http://placehold.it/400x150&text=slide 1" />                
            </li>
            <li>
            <img src="http://placehold.it/400x150&text=slide 2" />                
            </li>
            <li>
            <img src="http://placehold.it/400x150&text=slide 3" />                
            </li>
        </ul>
    </div>
</div>

2 つの Orbit が同じtimer_speedである場合 (デフォルトでは同期されます) 、ナビゲーション矢印をクリックして 2 つの Orbit のスライドを同期できます。

<script type="text/javascript">
    $(document).foundation();
    $(document).ready(function () {
        var fromSlide1 = false;
        var fromSlide2 = false;
        var slider1 = $("#slider1");
        var slider2 = $("#slider2");
        var slider1Prev = slider1.parent().find(".orbit-prev");
        var slider2Prev = slider2.parent().find(".orbit-prev");
        var slider1Next = slider1.parent().find(".orbit-next");
        var slider2Next = slider2.parent().find(".orbit-next");

        slider1Prev.click(function () {
            if (fromSlide1) return;
            fromSlide1 = true;              
            slider2Prev.click();
            fromSlide1 = false;
        });
        slider2Prev.click(function () {
            if (fromSlide2) return;
            fromSlide2 = true;
            slider1Prev.click();
            fromSlide2 = false;
        });
        slider1Next.click(function () {
            if (fromSlide1) return;
            fromSlide1 = true;              
            slider2Next.click();
            fromSlide1 = false;
        });
        slider2Next.click(function () {
            if (fromSlide2) return;
            fromSlide2 = true;
            slider1Next.click();
            fromSlide2 = false;
        });
    });
</script>
于 2013-03-21T10:42:56.520 に答える