セレクタに応じてCSS値を変更しますか？

Question

すべての冗長コードを持たずにこのアニメーションの左の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'}); 
}); 

Answer 1

あなたはdata属性を使用して、これらのatrributesで所望の目標値を格納することができます。例えば

あなたはこのようにマークアップしていた場合：

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

あなたはこれらすべてのdivが自分応じた値にフェード持つように結合性の単一hoverを使用することができます。

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

はa live demoを参照してください。

あなたのケースでは、おそらく異なる値をleft（data -attributes上

情報が代わりにMDN

で見つけることができます（ホバーをトリガー要素は通常$(this)経由で参照することができます）あなたの.recentと.feature要素へとホバーハンドラ内でこのデータを取得しますあなたのマークアップを変更したくない場合や変更できない場合に備えて）、ハンドラ内でどの要素がホバーをトリガしているかを知ることができます。もしそうなら、あなたは持っている：

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

はあなたが行うことができます：e.targetが渡されたイベントのターゲットである

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

。 another fiddle

Answer 2

変数に値を入力します。

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