1

実質的に同一の2つのアニメーションがあります...それらの違いは、「左と右」の配置です。コードの最初のブロックを .forward と .backward の両方に再利用したいと思います...これは、データまたは変数を使用して実行できると思いますが、どうすればよいかわかりません。

助けてくれてありがとう

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

0

新しい jQuery 関数を作成し、コード上の 2 つのセグメント間の違いごとに変数を渡すことができます。

$.fn.setupAnimation = function(selector, direction) {
    return this.hover(function() {
        var startData = {};
        startData[direction] = 20;

        $(this).find(selector).stop()
            .animate(startData, {queue:false, duration:300, easing:'easeOutCubic'})
            .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'});
    }, function() {
        var startData = {};
        startData[direction] = 0;

        $(this).find(selector).stop()
            .animate(startData, {queue:false, duration:550, easing:'easeOutSine'})
            .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
    });
}

$('.hover-area').setupAnimation('.forward', 'right');
$('.hover-area').setupAnimation('.backward', 'left');
于 2012-05-26T08:09:08.243 に答える