Question

I am creating my first jquery function. There is a set of buttons above a view window. The view window initializes with a div, when one of the buttons is pressed the corresponding div slides into the view window.

It works semi ok in firefox (doesnt work in any other browser) but eventually no div slides into the view window. I believe the issue has to do with the css left values going out of the range, but i am unsure how to fix it.

js

$(function() {
var prevButton = 3;
$("#par3").show();

$(".window_control").click(function() {
    var cur = this.id;

    if(cur != prevButton){

        var activeItem = $("#par"+prevButton);
        var nextItem = $('#par'+cur);

        var slider = $(".slider");
        var finalWidth = slider.width()*2;
        var animationTime = 2000;

        var cssDir = (prevButton > cur) ? "right" : "left";
        var animation = (prevButton > cur) ? { left: '+=' + finalWidth } : { left: '-=' + finalWidth };

        prevButton = cur;

        activeItem
            .animate(animation, animationTime);

        nextItem
            .show()
            .css(cssDir, finalWidth)
            .animate(animation, animationTime);
    }
    return false;
  });
}); 

Answer 1

Any reason you’re not using the native:

 $('div').show("slide", { direction: "left" }, 1000);