Jquery on click trigger two "events"

Question

What I would like is very simple, but I am struggling with the syntax. When my element clicked, I would like my animate to be triggered and just after the .css(). Thank you in advance for your help. Cheers. Marc.

$('.content').click(function() {
    $('#contentWrapper').animate({
        "left": "-=475px"}, "fast"), 
    $(this).prev().css("display": "none");
});

you DO know that .css("display","none") is the same as .hide() right? — Mark Schultheiss
– Mark Schultheiss, Commented Jan 25, 2012 at 15:20

Andrew Whitaker · Accepted Answer · 2012-01-25 14:49:35Z

4

Almost. You need to pass the complete argument on animate a function reference:

$('.content').click(function() {
    $('#contentWrapper').animate({
        "left": "-=475px"}, "fast", function () {
            $(this).prev().css("display", "none");
        }
    );
});

(Also, your syntax for css was a bit off, you wanted , instead of :)

answered Jan 25, 2012 at 14:49

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

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

5 Comments

Nicola Peluchetti Over a year ago

Since javascript has function scope, if you wrap the call inside another function this points to another object and not to the clicked object (at least that's what i think)

Marc Over a year ago

Thank you very much for helping out Andrew. Works great!

Andrew Whitaker Over a year ago

@NicolaPeluchetti: That's correct, this in the callback will reference the animated object.

Marc Over a year ago

Andrew, why it is , instead of : I always use : for .css() and it works usually

Andrew Whitaker Over a year ago

@user1162116: You could also use .css({ "display": "none" })

Nicola Peluchetti · Accepted Answer · 2012-01-25 14:50:37Z

2

You should provide the second function as a callback

$('.content').click(function() {
    $('#contentWrapper').animate({
        "left": "-=475px"}, "fast", $(this).prev().css("display": "none"));
    });
});

EDIT - I think that in this way this points to the clicked element. If it's not yous should do

$('.content').click(function() {
    var that = this;
    $('#contentWrapper').animate({
        "left": "-=475px"}, "fast", $(that).prev().css("display": "none"));
    });
});

answered Jan 25, 2012 at 14:50

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

Comments

calumbrodie · Accepted Answer · 2012-01-25 14:50:30Z

1

You supply the second part as a callback function, that means that it executes after the first function is complete. If you were acting on the same elemnt as the first animation then you could use chaining ('I'm not sure if you can use it in this circumstance because you didn't supply the html).

$('.content').click(function() {
    $('#contentWrapper').animate(
        {"left": "-=475px"},
        "fast",
        function(){
            $(this).prev().css("display": "none");
        }
    );
});

answered Jan 25, 2012 at 14:50

calumbrodie

4,8025 gold badges39 silver badges64 bronze badges

Collectives™ on Stack Overflow

Jquery on click trigger two "events"

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related