jQuery Invalid Argument 5899 in IE

Question

I tried using the Moving Boxes jQuery Plugin in Asp.net Mvc. It works in every browser except for IE.
Heres the plug in code. I was wondering if somebody has an idea on what might be different in IE, possibly something along the lines of the way IE parses widths? or fixed widths?

$(function () {

var totalPanels = $(".scrollContainer").children().size();

var regWidth = $(".panel").css("width");
var regImgWidth = $(".panel img").css("width");
var regTitleSize = $(".panel h2").css("font-size");
var regParSize = $(".panel p").css("font-size");

var movingDistance = 200;

var curWidth = 300;
var curImgWidth = 250;
var curTitleSize = "15px";
var curParSize = "12px";

var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');

$panels.css({ 'float': 'left', 'position': 'relative' });

$("#slider").data("currentlyMoving", false);

$container
    .css('width', ($panels[0].offsetWidth * $panels.length) + 135)
    .css('left', "-195px");

var scroll = $('#slider .scroll').css('overflow', 'hidden');

function returnToNormal(element) {
    $(element)
        .animate({ width: regWidth })
        .find("img")
        .animate({ width: regImgWidth })
        .end()
        .find("h2")
        .animate({ fontSize: regTitleSize })
        .end()
        .find("p")
        .animate({ fontSize: regParSize });
};

function growBigger(element) {
    $(element)
        .animate({ width: curWidth })
        .find("img")
        .animate({ width: curImgWidth })
        .end()
        .find("h2")
        .animate({ fontSize: curTitleSize })
        .end()
        .find("p")
        .animate({ fontSize: curParSize });
}

//direction true = right, false = left
function change(direction) {

    //if not at the first or last panel
    if ((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false; }

    //if not currently moving
    if (($("#slider").data("currentlyMoving") == false)) {

        $("#slider").data("currentlyMoving", true);

        var next = direction ? curPanel + 1 : curPanel - 1;
        var leftValue = $(".scrollContainer").css("left");
        var movement = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;

        $(".scrollContainer")
            .stop()
            .animate({
                "left": movement
            }, function () {
                $("#slider").data("currentlyMoving", false);
            });

        returnToNormal("#panel_" + curPanel);
        growBigger("#panel_" + next);

        curPanel = next;

        //remove all previous bound functions
        $("#panel_" + (curPanel + 1)).unbind();

        //go forward
        $("#panel_" + (curPanel + 1)).click(function () { change(true); });

        //remove all previous bound functions                                                           
        $("#panel_" + (curPanel - 1)).unbind();

        //go back
        $("#panel_" + (curPanel - 1)).click(function () { change(false); });

        //remove all previous bound functions
        $("#panel_" + curPanel).unbind();
    }
}

// Set up "Current" panel and next and prev
growBigger("#panel_3");
var curPanel = 3;

$("#panel_" + (curPanel + 1)).click(function () { change(true); });
$("#panel_" + (curPanel - 1)).click(function () { change(false); });

//when the left/right arrows are clicked
$(".right").click(function () { change(true); });
$(".left").click(function () { change(false); });

$(window).keydown(function (event) {
    switch (event.keyCode) {
        case 13: //enter
            $(".right").click();
            break;
        case 32: //space
            $(".right").click();
            break;
        case 37: //left arrow
            $(".left").click();
            break;
        case 39: //right arrow
            $(".right").click();
            break;
    }
});

});

Answer 1

Justin - I don't have much of an answer for you, but if it seems to be centered around the width property, try using jQuery's .width() method to get the width.

So instead of:

var regWidth = $(".panel").css("width");
var regImgWidth = $(".panel img").css("width");

try:

var regWidth = $(".panel").width();
var regImgWidth = $(".panel img").width(); 

Maybe jQuery does some fixes. Let me know how it goes.