Question

Let’s say I have the following code:

$('.slide_back').hover(function() {
    var $this = $(this),
        height = $this.height(),
        $slideHide = $this.find('.slide_hide');

    $slideHide.stop()
              .animate({marginTop: height / 2 + 'px'}, 400);
}, function() {
    var $this = $(this),
        height = $this.height(),
        $slideHide = $this.find('.slide_hide');

    $slideHide.stop()
              .animate({marginTop: height + 'px'}, 400);
});

You see a great deal of repetition here. Is there a more universal solution I could apply, rather than wrapping duplicate code into another helper function?

UPDATE: I am looking for some sort of ‘restore state’ or ‘undo’ function.

Answer 1

Create a custom function which returns a new function with the desired settings. It’s the neatest way to achieve that result.

Another method is using a variable to remember the current state (see method 2):

Method 1: Helper function

function universalWay(multiplier){
    return function(){
        var $this = $(this),
            height = $this.height(),
            $slideHide = $this.find('.slide_hide');

        $slideHide.stop()
            .animate({marginTop: multiplier * height + 'px'}, 400);
    };
}

$('.slide_back').hover(
       universalWay(1), 
       universalWay(0.5) // 1/2 = 0.5
);

Method 2: Using a variable

var multiplier = 1
function universalWay(){
    multiplier = multipler == 1 ? 0.5 : 1; //Switch between 1 and 0.5
    var $this = $(this),
        height = $this.height(),
        $slideHide = $this.find('.slide_hide');

    $slideHide.stop()
        .animate({marginTop: multiplier * height + 'px'}, 400);
}

$('.slide_back').hover(
       universalWay, 
       universalWay
);