Question

我尝试在Asp.net Mvc中使用Moving Boxes jQuery插件。它适用于IE以外的所有浏览器继承人插入代码。我想知道是否有人知道IE中可能有什么不同，可能是IE解析宽度的方式？或固定宽度？

$(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 - 我没有给你很多答案，但如果它似乎以width属性为中心，请尝试使用jQuery的.width()方法来获取宽度。

所以而不是：

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

尝试：

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

也许jQuery做了一些修复。让我知道它是怎么回事。

IE中的jQuery无效参数5899

1 个答案: