jquery関数のコールバックでCSSプロパティを適用する

Question

私は3つの個別の画像とそれぞれのテキストについて書いているコードを減らすためにコールバック関数を完了しようとしています。画像には特定のアニメーションが実行されていますが、ここでは機能していない唯一の$ eコールバックが付いています。

なんらかの理由でアニメーション映画の$ eを「左」と置き換えても、アニメーションに問題はありません。

なぜ、関数が$ eコールバックを取って問題を起こしているのか分かりませんか？私は、アポストロフィやスピーチ・マークなどですべての方法を試しましたが、それでも喜びはありません。

ありがとう、 Dan。

function animatePics($a, $b, $c, $d, $e, $f, $g) { 
    if($('#urlContainer a').attr('href') == undefined) {  
     $('#textContainer').hide().html($a).fadeIn(1000); 
     $('#urlContainer').hide().html($b).fadeIn(3000); 
     $('.pictureBox:nth-child('+$c+')').animate({opacity: '0'}, 1000); 
     $('.pictureBox:nth-child('+$d+')').animate({$e: $f},1000); 
     $('#homeIcon').fadeIn(2000); 
     $('#textContainer a').css({color: $g}); 
     $('footer').hide(); 
     $('.webImg').css({cursor: 'default'}); 
    } 
}; 

$('.pictureBox:nth-child(1)').click(function() { 
    animatePics($someText1,'<a href="http://www.somewebsite1.com" target="_blank">somewebsite1.com</a>','n2',1,'left','32.90%','red'); 
}); 

$('.pictureBox:nth-child(2)').click(function() { 
    animatePics($sometext2,'<a href="http://www.somewebsite2.com" target="_blank">somewebsite2.com</a>',1,3,'opacity',0,'seagreen'); 
}); 

$('.pictureBox:nth-child(3)').click(function() { 
    animatePics($sometext3,'<a href="http://www.somewebsite3.com" target="_blank">somewebsite3.com</a>','-n+2',3,'right',0,'blue'); 
}); 

Answer 1

は、次のコードで試してみてください。

function animatePics($a, $b, $c, $d, $animateOptions, $g) { 
    if($('#urlContainer a').attr('href') == undefined) {  
     $('#textContainer').hide().html($a).fadeIn(1000); 
     $('#urlContainer').hide().html($b).fadeIn(3000); 
     $('.pictureBox:nth-child('+$c+')').animate({opacity: '0'}, 1000); 
     $('.pictureBox:nth-child('+$d+')').animate($animateOptions,1000); 
     $('#homeIcon').fadeIn(2000); 
     $('#textContainer a').css({color: $g}); 
     $('footer').hide(); 
     $('.webImg').css({cursor: 'default'}); 
    } 
}; 

$('.pictureBox:nth-child(1)').click(function() { 
    animatePics($someText1,'<a href="http://www.somewebsite1.com" target="_blank">somewebsite1.com</a>','n2',1,{left : '32.90%'},'red'); 
}); 

$('.pictureBox:nth-child(2)').click(function() { 
    animatePics($sometext2,'<a href="http://www.somewebsite2.com" target="_blank">somewebsite2.com</a>',1,3,{opacity : 0},'seagreen'); 
}); 

$('.pictureBox:nth-child(3)').click(function() { 
    animatePics($sometext3,'<a href="http://www.somewebsite3.com" target="_blank">somewebsite3.com</a>','-n+2',3,{right : 0},'blue'); 
}); 

ここでは、$e, $fを削除し、代わりにそのことを私たちはアニメーションプロパティを保持するJSオブジェクトを渡しています。私はそれがあなたの必要に応じて動作すると確信しています。