JQuery-код оптимизации

Question

Мне нужно иметь только разные значения marginLeft для animate () внутри блоков else if и всего остального в else, если блоки должны быть одинаковыми. Сценарий выглядит следующим образом:

 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);

Answer 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);

Answer 2

Настройте параметры, измените при необходимости, затем используйте его. Кроме того, объедините ваши .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 );

Answer 3

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);

Answer 4

Попробуйте это

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);

Answer 5

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);

Answer 6

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);

Answer 7

Просто вытащите ваш объект в переменную:

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
);