Jquery 对左右方向值使用HTML5数据属性

以下代码块基本相同。。。它们之间的主要区别是左右方向值

我希望通过对.forward和.backward重用一块代码，尽可能减少以下代码。我假设我们可以使用变量或html5数据属性来存储左和右的值

再次感谢大家

<div class="hover-area">
    Hover area
    <div class="backward">Backward</div>
    <div class="forward">Forward</div>
</div>

<style>
    a
.hover-area {
    position: relative;
}

.forward,
.backward {
    position: absolute;
}

</style>

---

见鬼，我玩了一下，想出了：

$('.forward, .backward').css([$(this).is('.forward')?'right':'left'], 0).css('opacity', 0);
$('.hover-area').on('mouseenter mouseleave', function(evt) {
    $(this).find('.forward, .backward').each(function(i,elm) {
        var direction = {};
            direction[$(elm).is('.forward') ? 'right' : 'left'] = evt.type==='mouseleave'?0:20;
        $(elm).stop()
            .animate(direction, {queue:false, duration:300, easing:'easeOutCubic'})
            .animate({opacity: evt.type==='mouseleave'?0:0.95}, {queue:false, duration:400, easing:'easeOutCubic'});
    });
});​

---

你好，泰勒。在研究了这一点之后，我的想法是，如果进一步简化，将牺牲代码的大量可读性。我将把我的2个JSFIDLE留在这里，以防您或其他人想玩这个。第一个链接是您的原始代码，第二个链接是我试图简化（或者在我看来，过度复杂化）。祝你好运非常令人印象深刻+1（当我今天外出时再次获得选票）

$('.forward, .backward').css([$(this).is('.forward')?'right':'left'], 0).css('opacity', 0);
$('.hover-area').on('mouseenter mouseleave', function(evt) {
    $(this).find('.forward, .backward').each(function(i,elm) {
        var direction = {};
            direction[$(elm).is('.forward') ? 'right' : 'left'] = evt.type==='mouseleave'?0:20;
        $(elm).stop()
            .animate(direction, {queue:false, duration:300, easing:'easeOutCubic'})
            .animate({opacity: evt.type==='mouseleave'?0:0.95}, {queue:false, duration:400, easing:'easeOutCubic'});
    });
});​