jQuery Calling user defined function within function

Question

I am trying to call a user defined function within a jquery function to no avail I have tried this:

function close_quote_bar() {
    alert('oh hai');
}


if($('#sliding_quote:visible')) {

    $('#sliding_quote').slideUp();
    $('#trans_div').animate({opacity: 0.0}).css('display','none').close_quote_bar;

}

and this

//Function to close quote bar
function close_quote_bar() {
    alert('oh hai');
}

$('#get_quote_bar img').click(function() {                          
    if($('#sliding_quote:visible')) {               
        $('#sliding_quote').slideUp();
        $('#trans_div').animate({opacity: 0.0}).css('display','none').close_quote_bar;

    }               
});

With not much luck! Nothing happens when I cal close_quote_bar, or I get an Object is missing method error!

hope you guys can point me in the right direction I am really struggling with this one

You need to call your custom function in the callback of the animate or after you've set the css. It doesn't work at the moment as your function is not a method of the jquery object. — Coin_op
– Coin_op, Commented Feb 6, 2013 at 23:29
Neither are you calling it, nor is it a method of the jQuery object. Also, when do you want to get the alert? — Bergi
– Bergi, Commented Feb 6, 2013 at 23:30
Btw: I guess you want if ($('#sliding_quote').is(':visible')), currently the jQuery wrapper is always truthy (even if it contains nothing). — Bergi
– Bergi, Commented Feb 6, 2013 at 23:32

Coin_op · Accepted Answer · 2013-02-06 23:38:55Z

2

I assume you want something like this:

$('#sliding_quote:visible').slideUp( function(){
    $('#trans_div').css('display','none');
    close_quote_bar();
} );

It uses the slide up callback to then set the object to display none and run your function. This code also does away with the if statement by instead using the selector to only affect the visible element.

edited Feb 6, 2013 at 23:38

answered Feb 6, 2013 at 23:33

Coin_op

10.8k4 gold badges38 silver badges47 bronze badges

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

5 Comments

Zach Lysobey Over a year ago

looks like OP wants his $('#trans_div') to fade out. Perhaps use .fadeOut() instead of .css(...)

Coin_op Over a year ago

Fair point, maybe do: $('#trans_div').fadeOut(function(){close_quote_bar();});

Zach Lysobey Over a year ago

yup, realized that as I was editing my comment, and decided to add it as my own answer ;-)

Melbourne2991 Over a year ago

this looks great, i'll give it a go now, thanks Laurence :P However, could someone give me an idea why my current code doesn't work, also I am aware that it should have brackets after the functional call -I was trying a few things and left them out when I pasted the code

Zach Lysobey Over a year ago

to execute a function, you need the (). Also, it takes a bit more code to make a function a jquery "chainable" method ( $(something).another().somethingElse()...). Generally you just exectute functions as funcName(); on their own line

pwolaq · Accepted Answer · 2013-02-06 23:34:13Z

0

you should try this:

$('#trans_div').animate({opacity: 0.0}, 400, function(){
    $(this).css('display','none');
    close_quote_bar();
});

answered Feb 6, 2013 at 23:34

pwolaq

6,41221 silver badges45 bronze badges

Comments

Zach Lysobey · Accepted Answer · 2013-02-06 23:46:49Z

0

Building on @laurencek's answer.

$('#sliding_quote:visible').slideUp( function(){
    $('#trans_div').fadeOut( function(){
      close_quote_bar();
    });
});

this executes close_quote_bar() as a callback of fadeOut.

answered Feb 6, 2013 at 23:46

Zach Lysobey

15.9k21 gold badges101 silver badges153 bronze badges

2 Comments

Bergi Over a year ago

No, it executes an unnecessary anonymous function as the callback. Why not $('#trans_div').fadeOut(close_quote_bar);?

Zach Lysobey Over a year ago

you're right of course ;-). I always use the anonymous function pattern though. I do this mostly out of habit, but IMO it makes it easier to update and read. Guesse I shoulda said "in the callback of"

fedmich · Accepted Answer · 2013-02-06 23:51:30Z

0

This line of your code needs to be changed

$('#trans_div').animate({opacity: 0.0}).css('display','none').close_quote_bar;

You have to call it like this

$('#trans_div').animate({opacity: 0.0}).css('display','none');
close_quote_bar();

And finally to trigger your closequotebar AFTER your animation have finished to animate, use this code, notice that a function() is in the 3rd parameter.

$('#trans_div').animate({opacity: 0.0}, 400, function(){
    $(this).css('display','none');
    close_quote_bar();
});

both animate and slideUp supports adding function() block as their parameters, so you could call a function after the animating has finished http://api.jquery.com/animate/ see the "complete" part

edited Feb 6, 2013 at 23:51

answered Feb 6, 2013 at 23:33

fedmich

5,3733 gold badges39 silver badges52 bronze badges

Comments

Melbourne2991 · Accepted Answer · 2013-02-07 07:28:57Z

0

It turns out the function was being called and it was not an issue with the scope or anything like that.

I had another function that was executing on scroll (.scroll) that was conflicting with the function hence why it was behaving unexpectedly and appeared not to be executing.

answered Feb 7, 2013 at 7:28

Melbourne2991

11.8k12 gold badges49 silver badges83 bronze badges

Collectives™ on Stack Overflow

jQuery Calling user defined function within function

5 Answers 5

5 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related