Jquery-代码优化答案

【问题标题】：Jquery-code optimizationJquery-代码优化
【发布时间】：2011-07-19 17:57:19
【问题描述】：

我只需要在 else if 块内设置不同的 animate() 的 marginLeft 值，而在 else if 块中的所有其他值都应该相同。脚本如下：

 var timeoutID = window.setTimeout(
        function(){
        if (imgs.index(imgElement) == 0) {
            imgElement.animate({
                width: "315px",
                height: "225px",
                marginTop: "-50px",
                marginLeft: "-150px",
            }, 1500 );
            imgElement.css("z-index","100");
            imgElement.css("position","absolute");
            imgElement.css("opacity","1");
            }
        else if (imgs.index(imgElement) == 1) {
                     //The same thing but marginLeft: "-200px"
            }
         }, 1500);

【问题讨论】：

在 6 分钟内发布 6 个可行的答案 - 你被宠坏了！
不相关：您可以用单个css({'property1': 'value1', 'property2': 'value2'}) 调用替换对css('property', 'value') 的多个调用。
@Radu - 它是相关的 - 主题是关于 jQuery 优化。我什至将它包含在我的答案中。 :)

标签： javascript jquery coding-style

【解决方案1】：

您可以提取变量中的值，根据您的条件设置变量的值，然后使用该变量而不是硬编码的值。

var marginLeft = "-150px"; // extract the default value in a variable
if (imgs.index(imgElement) == 1) {
    marginLeft = "-200px"; // change the value according to conditions
}
imgElement.animate({
    width: "315px",
    height: "225px",
    marginTop: "-50px",
    marginLeft: marginLeft, // use the value from the variable
}, 1500);

【讨论】：

【解决方案2】：

只需将您的对象拉出到 var 中：

var timeoutID = window.setTimeout(
    function(){
        var animateArgs = {
            width: "315px",
            height: "225px",
            marginTop: "-50px",
            marginLeft: "-150px",
        };
        if (imgs.index(imgElement) == 0) {
            imgElement.animate(animateArgs, 1500 );
            imgElement.css("z-index","100");
            imgElement.css("position","absolute");
            imgElement.css("opacity","1");
        }
        else if (imgs.index(imgElement) == 1) {
            animateArgs.marginLeft = "-200px";
            // etc etc etc
        }
    }, 
    1500
);

【讨论】：

【解决方案3】：

var timeoutID = window.setTimeout(
        function(){
        // same for both index == 0 and index == 1
        if (imgs.index(imgElement) == 0 || imgs.index(imgElement) == 1) {
            imgElement.animate({
                width: "315px",
                height: "225px",
                marginTop: "-50px",
                // if index == 1 then -200 (px is assumed) else -150
                marginLeft: imgs.index(imgElement) ? -200 : -150,
            }, 1500 );
            imgElement.css("z-index","100");
            imgElement.css("position","absolute");
            imgElement.css("opacity","1");
            }
         }, 1500);

【讨论】：

【解决方案4】：

var timeoutID = window.setTimeout(
function(){
    var parms = {
            width: "315px",
            height: "225px",
            marginTop: "-50px"
        };
    if (imgs.index(imgElement) == 0) {
        parms.marginLeft: "-150px";
    }
    else if (imgs.index(imgElement) == 1) {
        parms.marginLeft: "-200px";
    }
    imgElement.animate(parms, 1500);
    imgElement.css("z-index","100");
    imgElement.css("position","absolute");
    imgElement.css("opacity","1");
}, 1500);

【讨论】：

【解决方案5】：

var settings = {
                width: "315px",
                height: "225px",
                marginTop: "-50px",
            };
var css = { // the CSS };

if (imgs.index(imgElement) == 0) {
    settings.marginLeft = "-150px";
} else if (imgs.index(imgElement) == 1) {
    settings.marginLeft = "-200px";
}
imgElement.animate(settings, 1500)
          .css(css);

【讨论】：

【解决方案6】：

设置选项，根据需要进行修改，然后使用它。此外，结合您的 .css() 调用以减少您进行的 API 调用次数。

var timeoutID = window.setTimeout( function()
{
    var animateOptions = {
        width: '315px',
        height: '225px',
        marginTop: '-50px'
    };

    if( imgs.index( imgElement ) === 0)
    {
        animateOptions.marginLeft = '-150px'
    }
    else if( imgs.index( imgElement ) === 1 )
    {
        animateOptions.marginLeft = '-200px'
    }
    else
    {
        // you should probably do something if neither condition is met
        // or set a default for the value in the initial setup
    }

    imgElement
        .animate( animateOptions, 1500 )
        .css( {
            zIndex: 100,
            position: 'absolute',
            opacity: 1
        } );
}, 1500 );

【讨论】：

【解决方案7】：

试试这个

var timeoutID = window.setTimeout(
        function(){
            imgElement.animate({
                width: "315px",
                height: "225px",
                marginTop: "-50px",
                marginLeft: imgs.index(imgElement)?"-150px":"-200px",
            }, 1500 );
            imgElement.css("z-index","100");
            imgElement.css("position","absolute");
            imgElement.css("opacity","1");
         }, 1500);

【讨论】：

这就像我的回答，但假设 if 语句是不必要的。然而，可能有其他不需要此动画的索引值。