3

jQuery アニメーションをトリガーする 2 つのページネーション リンクがあります。

アニメーションのコールバック関数は、2 番目のアニメーションをトリガーします。

これは正常に機能しますが、関数が最初に呼び出されたときにのみ機能します。

毎回、2 つのアニメーションのうち最初のアニメーションは機能し、2 つ目のアニメーションは機能しません。効果なしで CSS を変更するだけです。

私はここで頭を悩ませていますが、効果はありません（しゃれが意図されています）。

function switchItem(e) {
    e.preventDefault();

    // If not current piece
    if($(this).hasClass('light')) {

        /*  VARIABLES */
        var container = $('.portfolio footer .portfolio_content');
        var link = $(this).attr('id');
        var newItem = $(this).html();


        /*===================================================
        *   This is the Key part here
        ===================================================*/

            /* FIRST ANIMATION */

            container.animate({
                'right':'-100%'
            }, 300, 'swing',

            // Callback Function
            function() {

                $(this).html('').css({'left':'-100%'});

                $.get('inc/portfolio/'+link+'.php', function(data) {

                    container.html(data);

                    /* SECOND ANIMATION */

                    container.animate({
                        'left':'0%'
                    }, 300, 'swing');

                });
            });     
    }
}

デモンストレーションは次のとおりです。 http://eoghanoloughlin.com/my_site/#portfolio

4

3 に答える 3

4

ここで作業サンプルを参照してください。左は最初の右の -100% アニメーションと競合しています。最後に、右をリセットしないと、2 番目の左のアニメーションと競合します。

http://jsfiddle.net/PAdr3/2/

アニメーションの前に左にリセット

container.css('left', 'auto');

完了したらすぐにリセット

container.animate({
     'left':'0%'
 }, 300, 'swing', function() {
    $(this).css('right', 'auto');

 });
于 2013-04-17T14:31:32.107 に答える
0

最初のアニメーションの準備が整うまで、アニメーション機能はストリングしないと思います。ドキュメントは言う：

指定した場合、アニメーションが完了すると、完全なコールバック関数が起動されます。これは、異なるアニメーションを順番に並べるのに役立ちます。

このようなものがうまくいくかもしれません：

function switchItem(e) {
    e.preventDefault();
    // If not current piece
    if($(this).hasClass('light')) {
        /*  VARIABLES */
        var container = $('.portfolio footer .portfolio_content');
        var link = $(this).attr('id');
        var newItem = $(this).html();

        /*===================================================
        *   This is the Key part here
        ===================================================*/
            /* FIRST ANIMATION */
            container.animate({
                'right':'-100%'
            }, 300, 'swing',
            // Callback Function
            function() {
                $(this).html('').css({'left':'-100%'});
                $.get('inc/portfolio/'+link+'.php', function(data) {
                    container.html(data);
                });
            }).complete(
                /* SECOND ANIMATION */
                container.animate({
                    'left':'0%'
                }, 300, 'swing');
            );     
    }
}
于 2013-04-17T14:27:51.453 に答える
0

ページ内の html を新しいコンテンツに置き換えると、javascript を介して追加されたリスナーやその他の jquery 拡張機能が自動的に追加されません。

$.get で取得したコンテンツをページに配置した後、これらを再度適用する必要があると思います。

もう 1 つの方法は、1 回の読み込みですべてのコンテンツを追加し、2 番目のページを非表示にすることです。これは、おそらく $.get を使用するよりも優れた代替手段です。

于 2013-04-17T14:28:30.197 に答える