Более элегантный способ программирования анонимных функций в jQuery.hover

Question

Допустим, у меня есть следующий код:

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

Вы видите много повторений здесь.Есть ли более универсальное решение, которое я мог бы применить, вместо упаковки дублирующего кода в другую вспомогательную функцию?

ОБНОВЛЕНИЕ: Я ищу какое-то «состояние восстановления»'или' отменить 'функцию.

Answer 1

Создайте пользовательскую функцию, которая возвращает новую функцию с желаемыми настройками.Это самый лучший способ достичь этого результата.

Другой метод - использовать переменную для запоминания текущего состояния (см. Метод 2):

Метод 1: Вспомогательная функция

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

Метод 2: Использование переменной

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

Answer 2

Учтите это:

$( '.slide_back' ).bind( 'mouseenter mouseleave', function ( e )  {
    var height = $( this ).height(),
        marginTop = e.type === 'mouseenter' ? height / 2 : height;

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