Применение свойства css в вызове функции jquery

Question

Я пытаюсь выполнить функцию обратного вызова, чтобы уменьшить код, который я пишу для трех отдельных изображений и их соответствующего текста. У изображений есть определенные анимации для них, но я застрял здесь с обратным вызовом $ e, который является единственным, что не работает.

По какой-то причине он не принимает, но если я заменю $ e в animatePics, скажем, на «left», то анимация не будет работать.

Может кто-нибудь узнать, почему у функции возникает проблема с обратным вызовом $ e, пожалуйста? Я пробовал всевозможные конфигурации с апострофами и речевыми метками и т. Д., Но до сих пор нет радости.

Thanks, 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 держит свойство анимации. Я уверен, что он будет работать в соответствии с вашими потребностями.