Question

I have the following code for a menu system which includes a lot of parts which are common in every menu item.

I’m struggling to put the common code into functions which I can then call as needed – so I don’t need to have hundreds of lines of identical code.

Can anyone help point me in the right direction?

$("#test1").hover( function() {

    $(this).animate({
        width: "599px",
        left: "0px",
        height: "168px",
        backgroundColor: "#d7df23",
        opacity: 0.95
    }, 100).css({'z-index': "10", 'border-top': 'none'});

// Start of common code     
        $(this).find(".thumb").animate({
            width: "150px",
            height: "150px",
            marginTop: "8px",
            marginRight: "0px",
            marginBottom: "0px",
            marginLeft: "12px"
        }, 100).attr('src','images/home/animatedMenu/1IMG.jpg').css({'border': '1px solid #FFF'});
// End of common code

    $(this).find("h2").animate({
        left: "600px"
    }, 100).hide();

    $(this).find(".moredetail").delay(150).animate({
        left: "0px"
    }, {
        duration: 150,
        easing: 'easeInBounce'
    });

}, function() {

    $(this).clearQueue().animate({
        width: "246px",
        left: "9px",
        height: "83px",
        backgroundColor: "#222",
        opacity: 0.90
    }, 100).css({'z-index': "1", 'border-top': '1px solid #444'});

    // Start of common code
    $(this).find(".thumb").animate({
        width: "68px",
        height: "68px",
        marginTop: "6px",
        marginRight: "0px",
        marginBottom: "0px",
        marginLeft: "13px"
    }, 100).attr('src','images/home/animatedMenu/1IMGup.jpg').css({'border': '1px solid #000'});
// End of common code

    $(this).find("h2").show().animate({
        left: "0px"
    }, {
        duration: 350,
        easing: 'easeOutBounce'
    });

    $(this).find(".moredetail").animate({
        left: "600px"
    }, 100);

}); 

Answer 1

Factor each reused piece of code in a function. You’ll have two functions like this one:

function thumbHoverStart(element) {
  $(element).find(".thumb").animate({
        width: "150px",
        height: "150px",
        marginTop: "8px",
        marginRight: "0px",
        marginBottom: "0px",
        marginLeft: "12px"
  }, 100)
  .attr('src','images/home/animatedMenu/1IMG.jpg')
  .css({'border': '1px solid #FFF'});
}

Call each function from the appropriate event:

// ...
    opacity: 0.95
}, 100).css({'z-index': "10", 'border-top': 'none'});

thumbHoverStart(this);

$(this).find("h2").animate({
    left: "600px"
// ...