hi this is Alex from PHP academy' org
with a video tutorial for the new Boston
in this tutorial we're going to look at
an animation or effect in jQuery called
delay now what this doesn't do is
actually produce a specific effect but
it actually delays in in-between
animations so what we're going to look
at is appending animations onto each
other and putting delay in the middle to
create a pause between them so as an
example I'm going to create a button at
the top of my page just to know I've
already included jQuery and effects in
here and effect is the file we're going
to be working in the first paragraph is
just going to be a button so I'm gonna
give this a type of button and I'm gonna
give this a value just saying go for
example and I'm going to give this an ID
as well so we can use an event handler
to see when this has been clicked I'm
gonna click I'm gonna choose the name go
so in the second paragraph this is just
simply going to be some text so I'm
going to this here I don't think it's
yeah okay so disappear but I'm going to
vanish would be better and then what
we're going to do is delay this for
three seconds once it has and then come
back again
so we'll just write something like I'll
be back did you miss me okay so now
let's go ahead and preview this on our
page you can see the text here that
we've written when we click go this is
going to vanish completely it's going to
fade out we're going to be using the
fade-out function it's gonna delay for a
specific amount of seconds and then fade
back in again so you can use delay
between different functions to create a
pause in between their execution okay so
inside e effects is all first of all we
need to give an ID to this paragraph and
I'm just going to call it power inside
of effects we need to create a event
handler for this button first of all so
we reference the button which is called
go
and when the button has been clicked we
need to carry out another function so
the code between this parenthesis here
will be run when we click the Go button
okay so now what we want to do is
reference this paragraph which I've
called power inside of here
hash power we want to fade out so let's
go ahead and test that in the browser
and see if it's working when I click go
that should fade and it has now what we
want to do is delay the execution for 3
seconds for example and then we want to
fade back in so instead of coming down
here and re referencing this for example
peridot fade in which would work if we
go back to the page and click go so it
fades out and back in again instead of
doing that we can append these onto each
other so after the parentheses are of
the fade-out function we can use another
dot and then we can say fade in and
let's go ahead and test that in the
browser click go it fades out and then
straight back in again now what happens
if we want to delay this effect for a
specific amount of seconds well embedded
in between these two and again appending
this function on we can use the delay
function and this takes a parameter with
the number of seconds you want to delay
for in milliseconds so we could say 3000
which would equal 3 seconds so by doing
this we're running the fade-out function
which is set in the opacity of the
element gradually to 0 delay then holds
this animation for 3 seconds and then it
will fade back in back up to a hundred
percent opacity so let's go ahead and
refresh click go you'll see we wait
about one two three seconds and then it
will fade back in again so like I said
this delay function can be used with a
variety of other functions and effect
and essentially just pauses in between
animation effects in jQuery so it's
extremely useful when you want to
perhaps delay the
the execution whilst some more text or
some additional text goes into a
paragraph for example if you were
retrieving data from a database table
and you wanted to fade the the paragraph
or a div or a span out then put more
than say additional data into this
paragraph or span or div and then fade
back in you might want to do you might
want to use delay because the the
process of retrieving data from a
database might be time consuming so you
want to delay the animation while you
perform background operations so that's
the delay effect in jQuery although it's
not effect it does work with animation