Jquery-code optimization

I only need to have different marginLeft values of the animate() inside the else if blocks and everything other in the else if blocks should be the same. The script is as follows :

 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"开发者_JAVA百科,"1");
            }
        else if (imgs.index(imgElement) == 1) {
                     //The same thing but marginLeft: "-200px"
            }
         }, 1500);

---

You can extract the value in a variable, set the variable's value according to your conditions, then use the variable instead of the hardcoded value.

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

---

Just pull your object out into a 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
);

---

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

---

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

---

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

---

Set up the options, modify as necessary, then use it. Also, combine your .css() calls to lessen the number of API calls you make.

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

---

Try this

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