jQuery Animation using delay() Method

Hello guys, welcome to our series jQuery.

Previously, the segment that we were doing today we’ll continue the same segment. So, today’s video is the continuation of the previous segment. Now let’s continue with the previous segment.

So I hope, in the last segment of the practicals that we have done, that you at least once practice it. After Animate now it’s “Delay. What is Delay?

Whenever we perform any animation or effect whether its showhide, sliding, fading or animation any effect we add or perform then in that effect we want that whenever I press the button or any event fire. They must not come after the event fire but after a time period of one to two seconds of time delay the effect should be active. So, the time amount that we are adding, to start that delay that we are adding that time amount is known as Delay. 

So basically what is Delay?

“The jQuery delay method is used to delay the execution of functions in the queue’ which means whatever the execution of the function is to delay, we use the delay method.

‘It is the best method to make a delay between the queued jQuery effects’. Meaning, we have to use more than one jQuery effect. Currently we are doing the course of jQuery where we are learning all the effects one by one but when you have to perform it practically then you won’t perform the effects one by one but rather you’ll be applying more than one effect at once. So, when we apply more than one effect at once and all the effects come before the screen then we will not be able to see all effects properly. So, to give all the effects proper justification, to give proper execution time to the effect, if we take all the effects means the effects that are occurring one by one we have to add some delay. So that delay, the queued effects queued means consecutive are all delayed by delay effect so that all the effects are visible properly.

“The jQuery delay method sets a timer to delay the execution of the next item in the queue’ means after the current effect, the next effect should be executed by adding a little time duration so that it is visible and after a short time period it will be executed.

So basically the use of delay method is that after the events and the effects that are coming, to give some gap in the effect. We are adding some time delay.

For example: The syntax of the method is given here dollar selector then what are we doing, we are adding a simple delay method and then speed and queue name.

 Now you must be thinking, what is QueueName?

So QueueName basically is our method. For example, if we are using  sliding method then after the comma or after the parentheses what we can add “dot slide“ , “dot fading” , “dot fadetoggle”, “dot animate” means whatever we want to add we can add in here. When? This factory function dot delay after inside the parentheses this time and after the dot whatever the effect that. 

So basically, speed specifies how much time delay we want to have and QueueName specifies the name of the queue. Its default value is “FX”. FX stands for function. Sometimes FX is also used as a function in Math. “FX”, the standard queue effect, means whatever our next effect is. So if we see an example of it then you can see here. Above division we have applied delay and after delay we applied fadeIn. So if we see an example of this then let’s say this here HTML…, delay….

This is our library…. This is our style… if we want to add it.(10 seconds pause,typing) And this is our script. First we’ll save it as “delay”… So let’s say H one…. We’ll save it by saying delay. So, what I have to do is to make a small program in which I’ll add a fadeIn effect but it will be active after a time delay. So what we did for fadeIn, basically we took a button,.. ID,… show ….click. This is our div,… ID, ….fadeIN,… okay. So now in style… we, hashtag, fadeIn,… width hundred px, height hundred px, …background color blue…. and display …none.

So this is our delay program. Let’s save it, and run it.

So currently you can see this is my delay program. Nothing will happen on click and the rectangle that I have made is that new one that is of blue color, since I have given display none so it is not visible which I will make visible on clicking this button.

So what will I do now simply.. dollar… document dot ready function…, dollar…. On the click of this button… so this is my ID dot.. click… function after that dollar, fadeIn… dot and now if I normally want to run it then I will do it in this type, slow…, okay? Save.

Click, so it is slowly visible now. But I want to add it after the delay. So dot delay… okay? So what’s happening here is my fadeIn effect will be active after a second. So save. Reload.

Now, as soon as I click, the effect is shown after a second which means that my rectangle is starting to be visible after a second. If we do it again. So as you can see after clicking, my rectangle is visible with a time delay of 1 second.

So what we have done here is, we have seen both the ways. We have seen it without adding delay when the execution starts quickly and if we add the delay then before the execution there is a one second delay. So this the delay that before starting the effect it adds some delay. So this is the delay method. This is another example of delay method in which we have applied more than one effect. For example, we have used different divs in which fast, slow, thousand milliseconds, two thousand milliseconds and then four thousand milliseconds delay is added. Here it is made of five divs by using different delays.

So if we want to perform these things then we can do it in this way. Delay …two …then here comes one (6 seconds pause,typing)  okay so div one …so total there are five div. So div two, div three, div four, div five. So what do we have to do? This div, we can give the same CSS to everyone. So div one,… hashtag div two, …hashtag div three, …hashtag div four, ..hashtag div five. And now what can we do, we will remove the color property from everywhere so that everyone will have the same…width, height and  display property. There is div 1 and we will add background color, (5 seconds pause,typing) blue…. In div two we will give the background color …red, …in div three green,… div four …yellow and… div five (7 seconds pause,typing)okay.

So here are our divs and all their colors. Now above show we’ll add a hashtag …dive one, …and here is div two, div three, div four, div five. Now what we have done here is one of them is fast and the other is slow….