jQuery Transit Function Complete

Question

I have created these two functions using jquery transit that are designed to slide in a new block of html on to the page when the user presses on the right or left buttons. They work some of the time. Other times the content will load and then not unhide itself. So it will be loaded and you can inspect it with chrome and see the display is still set to none. Other times there are no problems and it works exactly as intended. There are no errors on page. Really the only JavaScript on the page is several different versions of this function that all load a different page and scroll it in, in some matter or form.

My question is: Am I using the function completes correctly from jquery Transit? Is my function working as intended or have I missed something big and there not set up properly.

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

There is no transition function in jQuery, there is an animate one. But I would advise using css3 transition property:

#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});
         });
     });
 }

This should get you started. Also don't name your JS functions with first capital letter and don't, the name would look better like this: "showPartTilesFromLeft()".

And html ids and classes must be all lowercase with words separated by comma "-".