Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML jQuery Basics (2014) Introduction to jQuery Ways to Include jQuery in a Project

Posted by Ben Goldman
Ben Goldman
14,626 Points

JQuery events in succession?

I'm currently trying to link some simple events so that they happen in succession. I've explored the documentation and tried all sorts of variations, and, despite some near successes, I can't quite nail it. Can someone clue me in on how this is done? In this case I'm simply using the "It's a trap" code from the lesson. A sign saying "It's a trap" appear on the screen and then disappears. I'm trying to string multiple signs in succession. In other words, "It's a trap" appears, then disappears. Then, another sign appears, and then disappears, etc, etc. I understand the basics of making things fadeout, or hide and then appear. I'm just trying to figure out how to link them together and have them execute so that it's not all run at the same time.

Thanks!

3 Answers

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

I don't have much time to elaborate on this (I have to be somewhere), but this should be what you're looking for:

function wait()
{
    $('.wait').hide().show('slow').delay(2000).fadeOut('slow');
}

$('.warning').hide().show('slow').delay().fadeOut('slow', wait);
Maciej Czuchnowski
Maciej Czuchnowski
36,441 Points
Maciej Czuchnowski
Maciej Czuchnowski
36,441 Points

Yeah, this seems about right and looks like it's using a callback function.

Ben Goldman
Ben Goldman
14,626 Points

Thanks Ryan! That was pretty much it. Only, the ".wait" code ended up loading twice. It ran when the page first loaded, then, again after the "wait" function was called. I just had to make two small changes.

function wait()
{
    $('.wait').show('slow').delay(2000).fadeOut('slow');
}

$('.wait').hide();
$('.warning').hide().show('slow').delay().fadeOut('slow', wait);

Thanks, again. This really helped me get a better idea of how to pass arguments using JQuery.

Maciej Czuchnowski
Maciej Czuchnowski
36,441 Points
Maciej Czuchnowski
Maciej Czuchnowski
36,441 Points

This looks promising, maybe it will help you, I haven't tried this yet: http://www.w3schools.com/jquery/jquery_callback.asp

Ben Goldman
Ben Goldman
14,626 Points

Thanks, Maciej! I'll let you know how it works after I try it out tomorrow.

Ben Goldman
Ben Goldman
14,626 Points

Unfortunately, it didn't seem to work for my instance. Thanks, though.

Ben Goldman
Ben Goldman
14,626 Points
Ben Goldman
Ben Goldman
14,626 Points

I guess more specifically, I'm trying to run the following so that the "wait" code will run once the "warning" code is finished.

$(".warning").hide().show("slow").delay().fadeOut("slow");
$(".wait").hide().show("slow").delay(2000).fadeOut("slow");