Jquery - problem writing a function for common tasks

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"
// ...

Answer 2

If the image number is based off the id just use that when setting the src:

.attr('src','images/home/animatedMenu/' + this.id.replace('test','') + 'IMG.jpg')

Then you can have one set of code based on a class selector, $(".hoverable").hover(...

Answer 3

Just initialize the function below which will be containing the common code -

Try below code -

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

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

    // call common code function   
           common1(this);


        $(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'});

        // call common function 2.
            common2(this)

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

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

    });

});

function common1(obj){
 $(obj).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'});

 }

function common2(obj){
 $(obj).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'});

}

Answer 4

if you don't mind loading a minimal configuration of the jQueryUI Core, you can clean up a ton of code and transfer the needed settings to css classes:

http://jqueryui.com/docs/Effects/Methods

with it, you can define all your transitions in your site's css file, and then just use jQueryUI's addClass, removeClass, toggleClass, and switchClass methods:

so then your jQuery gets simplified down to something like:

$(this).find(".thumb").toggleClass('animatedClass', 100);

where the actual visual styling of each transition is in a separate css file:

mysite.css

.animatedClass {
width: 150px;
height: 150px;
margin: 8px 0px 0px 12px;
background: url(images/home/animatedMenu/1IMG.jpg);
border: 1px solid #FFF;
}

would also definitely make tweaking the effect easier, as you won't have to touch the javascript and you'd just adjust the CSS... throw in firebug, and you can even tweak the effects in real time w/o reloading.

Answer 5

jQuery has the posibility to be extended by plug ins, you could write one to be able to do:

$("#test1").mySpecialHover();

To write a plug in you will need to do:

(function($){
    $.fn.mySpecialHover = function() {
    //.. some code
    }
})(jQuery);

Yo can check a good tutorial from the guys at doctype.tv http://doctype.tv/plugin