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