1

すべての冗長なコードを使用せずに、このアニメーションの左側の css 値を変更する方法があるかどうか疑問に思っていますか?

$('.recent .view-details-wrapp').css({opacity:0, left:33});
$('.recent .controls-wrapp').hover(function() {
    $(this).find('.view-details-wrapp').stop()
        .animate({left:63}, {queue:false, duration:300, easing:'easeOutCubic'})
        .animate({opacity:'0.99'}, {queue:false, duration:400, easing:'easeOutCubic'});
},function() {
    $(this).find('.view-details-wrapp').stop()
        .animate({left:33}, {queue:false, duration:550, easing:'easeOutSine'})
        .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
});



$('.featured .view-details-wrapp').css({opacity:0, left:83});
$('.featured .controls-wrapp').hover(function() {
    $(this).find('.view-details-wrapp').stop()
        .animate({left:103}, {queue:false, duration:300, easing:'easeOutCubic'})
        .animate({opacity:'0.99'}, {queue:false, duration:400, easing:'easeOutCubic'});
},function() {
    $(this).find('.view-details-wrapp').stop()
        .animate({left:83}, {queue:false, duration:550, easing:'easeOutSine'})
        .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
});
4

2 に答える 2

0

値を変数に入れます。

var left = 83;

$('.recent .view-details-wrapp').css({opacity:0, left:left});
$('.recent .controls-wrapp').hover(function() {
$(this).find('.view-details-wrapp').stop()
    .animate({left:(left + 30)}, {queue:false, duration:300, easing:'easeOutCubic'})
    .animate({opacity:'0.99'}, {queue:false, duration:400, easing:'easeOutCubic'});
},function() {
$(this).find('.view-details-wrapp').stop()
    .animate({left:left}, {queue:false, duration:550, easing:'easeOutSine'})
    .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
});
于 2012-04-18T07:03:38.137 に答える
0

data属性を使用して、目的のターゲット値をこれらの属性に格納できます。

たとえば、次のようなマークアップがあるとします。

<div data-target="0.1"></div>
<div data-target="0.2"></div>
...
<div data-target="0.8"></div>
<div data-target="0.9"></div>

単一のhoverバインディングを使用して、これらすべての div をそれに応じた値にフェードさせることができます。

$('div').hover(function(){
    $(this).fadeTo('fast',$(this).data('target'));
},function(){
    $(this).fadeTo('fast',1);
});​

ライブデモを見る

あなたの場合、それはおそらくleftあなたが.recentと.feature要素に異なる値をアタッチし、ホバーハンドラー内でこのデータを取得することを意味します（ホバーをトリガーする要素は通常、経由で参照できます$(this)）

data-attributesに関する情報はMDNにあります

あるいは (マークアップを変更したくない、または変更できない場合)、どの要素がハンドラー内でホバーをトリガーしているかを調べることもできます。あなたが持っている場合：

<div class="foo"></div>
<div class="bar"></div>

できるよ：

$('div').hover(function(e){
    var t;
    if ($(e.target).hasClass('foo')){
       t = 0.2;
    } else if ($(e.target).hasClass('bar')){
       t = 0.8;
    }
    $(this).fadeTo('fast',t);
},function(){
    $(this).fadeTo('fast',1);
});​

e.target渡されたイベントのターゲットはどこですか。別のフィドルを見る

于 2012-04-18T07:26:10.643 に答える