Функция транзита jQuery завершена

Question

Я создал эти две функции, используя транзит jquery, которые предназначены для перемещения нового блока html на страницу, когда пользователь нажимает правую или левую кнопки. Они работают иногда. В других случаях содержимое будет загружаться, а затем не показываться. Таким образом, он будет загружен, и вы можете проверить его с помощью хрома и увидеть, что дисплей по-прежнему не установлен. В остальное время проблем нет и работает точно так, как задумано. На странице нет ошибок. На самом деле единственный JavaScript-код на странице - это несколько разных версий этой функции, которые все загружают разные страницы и прокручивают их в том или ином виде или форме.

Мой вопрос: правильно ли я использую функцию завершения из транзита jquery? Работает ли моя функция так, как задумано, или я пропустил что-то большое и неправильно настроено.

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")
    })
}

Answer 1

В 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 должны быть все в нижнем регистре со словами, разделенными запятой "-".