Applying a css property in jquery function callback

Question

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

vijayP · Accepted Answer · 2016-08-19 11:46:42Z

1

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.

answered Aug 19, 2016 at 11:46

vijayP

11.5k5 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Underwood Over a year ago

That's worked perfectly, thank you.I did try something along those lines but I took the code from 'animate' onwards, however I placed it all into a string, which is where I was also going wrong!

vijayP Over a year ago

correct...$.animate needs a JS object. Thanks...:)!

Collectives™ on Stack Overflow

Applying a css property in jquery function callback

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related