0

ユーザーが右または左のボタンを押したときに、新しい HTML ブロックをページにスライドさせるように設計された jquery トランジットを使用して、これら 2 つの関数を作成しました。彼らは時々働きます。また、コンテンツが読み込まれ、それ自体が再表示されない場合もあります。したがって、ロードされ、クロムで検査すると、表示がまだなしに設定されていることがわかります。それ以外の場合は問題なく、意図したとおりに機能します。ページにエラーはありません。ページ上の実際の唯一の JavaScript は、この関数のいくつかの異なるバージョンであり、それらすべてが異なるページをロードし、なんらかの形で、それをスクロールします。

私の質問は次のとおりです。関数を使用していますか jquery Transitから正しく完了しますか? 私の機能は意図したとおりに機能していますか、それとも大きなものを見逃していて、適切にセットアップされていませんか?

function ShowPartTiles_FromLeft() {
    $("#SeriesPartBrand").transition({
        opacity: 0,
        x: "1000px"
    }, 500, "out", function() {
        $("#SeriesPartBrand").transition({
            opacity: 0,
            x: "-1000px"
        }, 0, "out")
    }), $("#SeriesPartBrand").load("<?php echo uri_string() ?>/part", function() {
        $("#SeriesPartBrand").transition({
            opacity: 1,
            x: "0"
        }, 500, "in")
    })
}

function ShowPartTiles_FromRight() {
    $("#SeriesPartBrand").transition({
        opacity: 0,
        x: "-1000px"
    }, 500, "out", function() {
        $("#SeriesPartBrand").transition({
            opacity: 0,
            x: "1000px"
        }, 0, "out")
    }), $("#SeriesPartBrand").load("<?php echo uri_string() ?>/part", function() {
        $("#SeriesPartBrand").transition({
            opacity: 1,
            x: "0"
        }, 500, "in")
    })
}
4

1 に答える 1

0

jQuery にはトランジション関数はありません。アニメーション関数があります。ただし、css3 トランジション プロパティを使用することをお勧めします。

#SeriesPartBrand {
    transition: all 0.5s;
}

function ShowPartTiles_FromLeft() {
     $("#SeriesPartBrand").css({opacity: 0, left: 1000});
     $("#SeriesPartBrand").off('transitionend').on('transitionend', function() {
         $("#SeriesPartBrand").css({opacity: 0, left: -1000});
         $("#SeriesPartBrand").load("<?php echo uri_string() ?>/part", function() {
            $("#SeriesPartBrand").css({opacity: 0, left: 0});
         });
     });
 }

これで始められるはずです。また、JS 関数の名前の最初に大文字を使用しないでください。「showPartTilesFromLeft()」のように名前を付けたほうがよいでしょう。

また、html の ID とクラスはすべて小文字で、単語はコンマ「-」で区切られている必要があります。

于 2014-09-11T14:05:01.547 に答える