0

追記：タイトル変更！定義が間違っていた、またはまだ間違っている可能性があります。私の悪い英語でごめんなさい！

私は JQuery が初めてで、常にプログラミング、Javascript、CSS3、および HTML5 を使用しています。「次へボタン」をクリックすると、HTML要素をアニメーション化しようとしています。jQuery独自の「animate」で動作！しかし、私は今、CSS ファイルから独自のアニメーションを各要素に追加したいと考えています。

これが私のHTMLスニペットです：

<div id="output0" class="output0">output0</div>
<div id="output1" class="output1">output1</div>
<div id="output2" class="output2">output2</div>
<div id="output3" class="output3">output3</div>
<div id="output4" class="output4">output4</div>

これが私のCSSスニペットです：

.output0 {
    position: absolute;
    top: 120px;
    left: 300px;
    width: 200px;
    height: 500px;
    border-top-left-radius: 10px 5px; 
    border-bottom-right-radius : 10% 5%;
    border-top-right-radius : 10px;
    background: #4d4ea3;
    text-align: center;
    text-shadow: 0 1px rgba(0, 0, 0, 0.6);
color: #FFF;
font-size: 14px;
line-height: 50px;
-webkit-animation-duration: 3s;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: 1;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;
}

... and so on for each Element/Class their own Animation ...

ここに私のスクリプトスニペットがあります:

var jButton = $('#Next');
$('.output','.output0', '.output1', '.output2','output3', '.output4', '.output5').hide();
jButton.data(
    "config",
    {
        Index: 0,
        Collection: $('.output','.output0', '.output1', '.output2','output3', '.output4', '.output5')
    });
jButton.click(
    function(objEvent){
        var jThis = $(this);
        var objConfig = jThis.data("config");
        if (objConfig.Index < objConfig.Collection.length){
            $(objConfig.Collection[objConfig.Index++]
        )
        .$('.output0').addClass(fadeInLeftBig),
        $('.output1').addClass(flipInX),
        $('.output2').addClass(fadeInRightBig),
        $('.output3').addClass(fadeInDownBig),
        $('.output4').addClass(fadeInUpBig),
        $('.output5').addClass(animate);
        //$('.output').addClass();
        //.slideDown();
        }
        objEvent.preventDefault;
        return(false);
    });
});

みんなを助けてください!? 何か案が？

編集：

申し訳ありませんが、私は今答えています。私は別のプロジェクトで働かなければなりませんでした。今、私は戻ってきました。わかりました、私は今同じクラスを異なるIDで使用しました。そして、これらの ID は、CSS ファイルで使用しました。しかし、現在の主な問題は、「コード内の他のアニメーションと Jquery で使用するにはどうすればよいですか?」です。>slideDown、つまり、各データオブジェクト/配列要素のfadeIn、slideInだけでなく、別のものであり、正確にこれである必要があります:)? - データ オブジェクトを 2 番目のボタン "jButton2" で使用して、要素が実際にアニメーション化されているか、データ ストレージにあることをキャッチするにはどうすればよいですか。この jButton2 を使用してアニメーションをロールバックしたいのですが、そのためにはどの要素が実際に存在するかを知る必要があります。ご協力いただきありがとうございます！

JS:

$(jButton1).data("config", {
    Index : 0,
    Collection : $('.output')
}
...
jButton1.click(function(objEvent) { 
    var jThis = $(this); 
    var objConfig = jThis.data("config"); 
    if (objConfig.Index < objConfig.Collection.length) {                                         
        $(objConfig.Collection[objConfig.Index++]).slideDown("slow"); 
    } 
}

HTML:

<div id="output0" class="output">output0</div>
<div id="output1" class="output">output1</div>
<div id="output2" class="output">output2</div>
<div id="output3" class="output">output3</div>
<div id="output4" class="output">output4</div>
4

2 に答える 2

0

jQuery UI はクラスの切り替えをサポートしていますが、jQuery だけではサポートしていないことに注意してください。

jQueryのドキュメントからanimate()

注: jQuery UI プロジェクトは、色などの数値以外のスタイルをアニメーション化できるようにすることで、.animate() メソッドを拡張します。このプロジェクトには、個々の属性ではなく、CSS クラスを通じてアニメーションを指定するためのメカニズムも含まれています。

jQuery UI ドキュメントへのリンクは次のとおりです: http://jqueryui.com/switchClass/

于 2013-08-28T11:11:33.413 に答える
0

いくつかの本を読み、調査して試してみた後、以前の問題に対して次のコードを実行しました（元のコードはここで見つかりましたが、リンクが見つかりません、申し訳ありません）。完璧ではありませんが、半分は使用できます:D. 最終的な解決策について、私は現在取り組んでいます。ところで、私はこの前の 3 週間の休暇をとっていたので、こんなに長くかかったのです :)。

さまざまなアニメーション効果が近日公開予定！

だからここに行きます：

// Click Next to animate one by one
$(function() {
    var myArray = $('.output');
    var arrayIndex = 0;

    //Go Forwards
    $('#Next').click(function() {

        $(myArray[arrayIndex++]).slideDown()

        if (arrayIndex >= myArray.length)
            arrayIndex = 0;
    })


    //Go Backwards
    $('#Back').click(function() {
        $(myArray[arrayIndex--]).slideUp()
        if (arrayIndex < 0)
            arrayIndex = myArray.length - 1;

    })



});
于 2013-10-01T14:02:17.747 に答える