Daniel Underwood Daniel Underwood - 3 months ago 10
jQuery Question

Applying a css property in jquery function callback

I'm trying to complete a callback function in order to lessen the code I'm writing for three individual images and their respective text. The images have certain animations running for them, but I'm stuck here with the $e callback, which is the only one that isn't functioning.

For some reason it isn't taking, yet if I replace $e in animatePics with, say, 'left', then the animation works no problem.

Would anyone happen to know why the function is having a problem taking the $e callback, please? I've tried all manner of configurations with apostrophes and speech marks, etc., but still no joy.

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

Can you try with following code:

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

Here we have removed $e, $f and instead of that we are passing the JS object holding animation property. I am sure it will work as per your need.

Comments