0

次のコードブロックはほとんど同じです...それらの間の主な違いは、左右の方向の値です。

.forwardと.backwardの両方に1ブロックのコードを再利用することで、次のコードを可能な限り削減したいと思います。変数またはhtml5data-attrを使用して、左と右の値を格納できると思いますか？

みなさん、ありがとうございました！

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

</ p> 

    $('.forward').css({opacity:0, right:0});
    $('.hover-area').hover(function() {
        $(this).find('.forward').stop()
            .animate({right:20}, {queue:false, duration:300, easing:'easeOutCubic'})
            .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'});
    },function() {
        $(this).find('.forward').stop()
            .animate({right:0}, {queue:false, duration:550, easing:'easeOutSine'})
            .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
    });



    $('.backward').css({opacity:0, left:0});
    $('.hover-area').hover(function() {
        $(this).find('.backward').stop()
            .animate({left:20}, {queue:false, duration:300, easing:'easeOutCubic'})
            .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'});
    },function() {
        $(this).find('.backward').stop()
            .animate({left:0}, {queue:false, duration:550, easing:'easeOutSine'})
            .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
    });
4

1 に答える 1

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

デモンストレーション

于 2012-05-26T21:06:07.370 に答える