Question

The following lines of my code are doing absolutely nothing.

changeqnt -= $(curwidth).width() - (($(curwidth).width() - $(nextwidth).width()) / 2);
$('.picstrip').animate({left: changeqnt + 'px'}, 400, function(){ galactive = 1 });

They are part of a larger function, see below, that very oddly is working using CSS3 webkit but this JQuery fallback that should be simple it will not execute although it will perform the opacity function.

CODE

$(window).load(function(){
    var picstripstart = (($('.currentwindow').width() - $('.gallery img:first').width()) / 2);
    var galqnt = ($('.gallery img').length -1);
    var galactive = 1;
    var changeqnt = picstripstart;
    $('.picstrip').animate({left: '+=' + picstripstart + 'px', leaveTransforms:true}, 20);
    $('.gallery img').animate({opacity:0.6, leaveTransforms:true}, 400);
    $('.gallery img:first').animate({opacity:1, leaveTransforms:true}, 400).addClass('galeryshown');

    $('a.arrows').click(function(){

        if(galactive == 1){
            galactive = 0;
            var curwidth = $('.gallery img.galeryshown');
            var nextwidth = $(curwidth).next();
            var prevwidth = $(curwidth).prev();

            if($(this).attr('class') == 'arrows r') {
                if($(curwidth).index() == galqnt) { galactive = 1; return false }
                else {
                    $(curwidth).removeClass('galeryshown').animate({opacity: 0.6, leaveTransforms:true}, 400);
                    $(nextwidth).addClass('galeryshown').animate({opacity: 1, leaveTransforms:true}, 400);
                    changeqnt -= $(curwidth).width() - (($(curwidth).width() - $(nextwidth).width()) / 2);
                    $('.picstrip').animate({left: changeqnt + 'px', leaveTransforms:true}, 400, function(){ galactive = 1 });
                }
            }
            if($(this).attr('class') == 'arrows l') {
                if($(curwidth).index() == 0) { galactive = 1; return false }
                else {
                    $(curwidth).removeClass('galeryshown').animate({opacity: 0.6, leaveTransforms:true}, 400);
                    $(prevwidth).addClass('galeryshown').animate({opacity: 1, leaveTransforms:true}, 400);
                    changeqnt += $(curwidth).width() - (($(curwidth).width() - $(prevwidth).width()) / 2);
                    $('.picstrip').animate({left: changeqnt + 'px', leaveTransforms:true}, 400, function(){ galactive = 1 });
                }
            }
        }

        return false
    });

    $('.gallery').mouseenter(function(){
        $('a.arrows').animate({opacity:1, leaveTransforms:true}, 400);
    });
    $('.gallery').mouseleave(function(){
        $('a.arrows').animate({opacity:0.5, leaveTransforms:true}, 400);
    });


});

Answer 1

Oddly enough I just encountered a similar problem. Try explicitly setting the element position to relative and see if that makes a difference.

$('.picstrip').css({ "position" : "relative" });