1

このスクリプトを使用して、jqueryとcssでいくつかのdivをアニメーション化しました。今、私はこれらの2つ以上のボタンを使用したいと思います。代わりに、下にいくつかのリストがあるはずです。しかし、各jqueryスクリプトをコピーして、変数の名前を変更することはできません。

ここに例があります：http：//jonathanstark.com/labs/simple-sliding-example-using-css3-animations.html

変数とスクリプトを変更するにはどうすればよいですか。スクリプトは、「設定」と「ホーム」のdivのすべての組み合わせに対応します。垂直メニューのように、各「ホーム」divで、結合された「設定」divがスライドします。

<script>
            function goTo(targetPanelId) {
                var home = document.getElementById('home');
                var settings = document.getElementById('settings');
                if (targetPanelId === 'settings') {
                    home.className = 'slide left out';
                    settings.className = 'slide left in';                    
                } else {
                    home.className = 'slide right in';
                    settings.className = 'slide right out';                    
                }
                return false;
            }
        </script>
4

1 に答える 1

0

これが私のコードです、これがあなたが望んでいたものであることを願っています：

jsfiddle

HTML

<div id="container">
    <div id="home">
        <h1>Home</h1>
        <a href="#" class="menu" data-hash="settings-1"><span>Go to Settings 1</span></a>
        <a href="#" class="menu" data-hash="settings-2"><span>Go to Settings 2</span></a>
        <a href="#" class="menu" data-hash="settings-3"><span>Go to Settings 3</span></a>
        <p>Animation Example</p>
        <p>When a button is clicked/tapped, the JavaScript merely assigns class names to the panels. The CSS then jumps into action based on the new class names.</p>
    </div>
    <div id="settings">
        <h1>Settings</h1>
        <a id="settings-1" href="#" class="menu" data-hash="home"><span>Go to Home 1</span></a>
        <a id="settings-2" href="#" class="menu" data-hash="home"><span>Go to Home 2</span></a>
        <a id="settings-3" href="#" class="menu" data-hash="home"><span>Go to Home 3</span></a>
    </div>
</div>

JS

function goTo(link) {
    var hash = link.dataset['hash'],
        target = document.getElementById(hash),
        source = link.parentNode,
        isHome = source.id == 'home';

    if(isHome) {
        target.className = 'slide left in';
    }else{
        link.className = 'slide right out';
    }

    return false;
}

var navs = document.getElementsByClassName('menu');
for(var i in navs) {
    var obj = navs[i];
    if(typeof obj == 'object') {
        obj.addEventListener('click', function() {
            goTo(this);
        });
    }
}

削除されたpタグに注意してください。アンカーを親の幅全体にボタンスタイルのスパンで作成する必要がありました。そうしないと、100％のx変換が完全なアニメーションにならないためです。

于 2012-06-22T10:45:37.803 に答える