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

JavaScript

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

How to read these JQuery lines

Hello!

Can you please tell me how to read the actions that are being performed in this statement in their respective order and time?

1) $("p").show("fade", 500)

2) $("p").delay(5500).hide("slide", {direction:"left", 500)

3) When I check the Jquery Api documentation, I see the following parameters:

show( [duration ] [, easing ] [, complete ] )

a) I believe "complete" refers to a function we call in show (), I wonder if we can change the order of the parameters in the show() and get the same effect?

b) I can't understand what the easing parameter is about. Can you please give me a simple example.

thanks

Franklin Mark Aguba
Franklin Mark Aguba
4,082 Points
Franklin Mark Aguba
Franklin Mark Aguba
4,082 Points

Hi! To answer both your questions

a.) The "complete" parameter refers to another function that will be called once the initial method has been successfully run. For example, we can have something similar to this:

$variable.show("fade", 500, function() {
//block of codes will run here
});

What happens here is that $variable will be "shown" first. Then after completing $variable.show(), it will run another set of codes inside the function(). You can either have anything inside it or none at all.

b.) Easing is another way to tell us how fast or how slow the transition of the effect will be. It is counted as a millisecond (1000 = 1 second). The lower the number, the faster the transition will be. Also, as a shortcut, you can also use keywords such as "slow", or "fast", or "normal" which defaults to 1000, 300, and 500 respectively (citation needed - please hit me on the head if I'm wrong on this)

3 Answers

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Franklin,

Thanks for your explanation. Can I use the the statements below to see if I understand your explanation:

1)$("p").show("fade", 500);

a)The show() makes the paragraphs appear on the screen first, right? b)After the show() has fully run, the fade method( which is our 'complete parameter') runs next, right? Does the fade method happen in 1/2 a second or 500 ms??

2) How would would you describe in order what is happening inside this statement? $("p").delay(5500).hide.hide("slide", {direction: "left", 500);

Thanks!!

*** Can you please answer this post under add a Post. (It is at the bottom of this page). This way, I will not be able to vote. Cheers!!

Franklin Mark Aguba
Franklin Mark Aguba
4,082 Points
Franklin Mark Aguba
Franklin Mark Aguba
4,082 Points

Sorry about that! I seem to be mistaken on that part. Please let me explain it and disregard my former explanation.

As you can see here, show() accepts ONLY two parameters, duration, and complete parameters. Duration is any number higher than 0. Completion is an optional parameter that you can use when you need it. Syntax-wise, it would look something like this:

$("p").show(500, function() {
//blocks of code here
});

I think I can better explain it if we are to have an objective in mind. So let's say that we have the following HTML structure.

<!DOCTYPE html>
<head>
</head>
<body>

<div style="display: none;">
<p style="display: none;">Sample paragraph</p>
</div>

</body>
</html>
<!-- Rest of HTML stuff below -->

When a web browser renders this, it will display a blank page because both <div> and <p> has a style that causes it to be hidden (display:none;)

We'll then make both div and p appear using jQuery. Consider the following code:

$(document).ready(function() {

$('div').show(500, function() {
     $('p').show(1000).hide(1000).show(1000);
}

});

If we are to explain the jQuery code above:

1.) It will first load the document. If the document is "ready", it will run the blocks of code inside it.

2.) After that, jQuery will make the <div> appear by using the show() function. It will appear after 1/2 second.

3.) After "showing" the <div> successfully (after 1/2 second), it will run another set of function inside it, which is the $('p').show(1000).hide(1000). (Note: $('p').show(1000) will only run IF the show() has completed.)

4.) <p> will show up after a second (1000) first, then hides it again through hide() for one second(1000), then shows it again after one second after the last one. (Note: You'd get a blinking effect if you keep going. That's helpful on images. Not sure why we would want that on paragraphs. That's basically trolling!)

There we go! I think you can use the Treehouse's workspace to try that out to see for yourself. I think this answers both your questions. I hope it helped you.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Franklin,

$('p').show(1000).hide(1000).show(1000);

Just need a little more clarification on #4, particularly with the prepositions

Concerning show(),the paragraph or any element targeted should the show happen 'after' one second and not "for " one second, right?

With hide(), does the paragraph or any element that is targeted hide "after" 1 second or does the paragraph got through the hidden process "for" 1 second

1) Now that I have typed it out, I would say "after 1 second" and "for one second "are the same. What do you think?

2) would you say easing and duration parameters or similar? I know that duration takes a number, but easing... What would be considered 'easing'

**Yes, I know this code is not the best example, but it is just to know the order of events, not for actual use in code.

Cheers!

orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Franklin, In fact , I am trying to understand a slider from the video below. If you watch it, you will see why I am so caught up on prepositions.

$(".slider#1').show("fade", 500); $(".slider#1").delay(5500).hide("slide", {direction:"left", 500);

In the video below he says the slider#1 appears or shows in or for 1/2 second(not clear), but I am sure that he says after 5 seconds (delay(5500), the hide method () runs and ... Once the 5500 delay is over,I am not sure when the duration of 500 kicks in. If you could help with this portion of the code, that would help a lot.

https://www.youtube.com/watch?v=yikHrIMsccw

My apology for picking your brain this way

Thanks