怪异的滑块行为

Slider page: http://livinginspace.staging.wpengine.com/portfolio/. When you hover over the image, the caption at the bottom slides up and on mouseout it slides down again. Everything works great. Now if you go http://livinginspace.staging.wpengine.com/home2/ and navigate to portfolio via menu the slider starts behaving weirdly (navigation is accomplished with ajax). Every time you mouseover the image, the caption keeps going higher, and every time you mouseout it goes lower and lower. Here is the code (I know it's not very tidy, but I will clean it up once everything is working properly:

$(window).resize(sizeImg);
    $(document).ready(sizeImg);

    function sizeImg() {
        var theImg = $('.mediaholder_innerwrap');
        var w = $(window).height();
        var h = $('header').height();
        var t = $('div.title').height();
        var d = $('h4.showbiz-title.txt-center').height();
        var f = $('footer').height();
        var desiredHeight = w - h - t - f;
        $(theImg).css("height", desiredHeight);
        var p = $('.detailholder p').height();
        var botOffset = (0 - p - 20);
        var oneSlide = $('.showbiz div ul li');
        var theCaption = $('.detailholder');
        $(theCaption).css('position', 'absolute');
        $(theCaption).css('opacity', '0.7');
        $(theCaption).animate({bottom: botOffset});


        // same but with admin bar offset
        if($('div#wpadminbar').length ) {
            var adminBar = $('div#wpadminbar').height();
            desiredHeight = w - h - t - f - adminBar;
            $(theImg).css("height", desiredHeight);
        }


        //to make img properly fit into div
        $('.mediaholder_innerwrap img').css('height', '100%');
    }

    //check if the page changed (ajax) and apply  the image style (position) again
    checkForChanges();
    var bodyClass = $('body').attr('class');

    function checkForChanges() {
        setInterval(function(){
    if($("body").attr('class') !== bodyClass) {

        sizeImg();
        bodyClass = $("body").attr('class');
    }
    }, 100);
    }

    // mouseover and mouseout function
    // Add correct behavior on hovering title of the slide
    $(document).on("mouseover", '.overflowholder ul li', (function() {
        $('.detailholder').css('position', 'absolute');
        $('.detailholder').animate({bottom: 0});
        $('.detailholder').css('opacity', '0.95');
        }));


    $(document).on("mouseout", '.overflowholder ul li', (function() {
        var p = $('.detailholder p').height();
        var botOffset = (0 - p - 20);
        $('.detailholder').css('position', 'absolute');
        $('.detailholder').animate({bottom: botOffset});
        $('.detailholder').css('opacity', '0.7');
        }));

I know the code is very unclean and there are lots of repetitions but that's not the point right now, just need to make sure that slider works fine after the page transition from home2. Thanks a lot in advance.

I don't know if this is the weird behavior you describes but for me the bottom bar bounces up and down periodically for a while - this is when you mouse over on bottom part of the images. I suggest you use .stop() method like this:

$(theCaption).stop().animate({bottom: botOffset});

It stops the animation currently being processed and immediately starts the new one. Otherwise animations stack up in a queue and they are being processed one after another.