Translation: (jquery) effect delay trick

Original article address: effect delay trick

Author: Karl

PS: E is not good. Check thisArticleEasy to translate. :)
Note: The jquery framework is required.

This is a trick that quickly achieves latency without using setTimeout.
For example, when a user clicks a button, I want to display a warning message on the page. but I don't want this warning to always be displayed on the page, and I want it to disappear in a few seconds.

Okay. Let's take a look at the effect and click the button below.

Hope you like this information when it is displayed!

Html

Well, first we need a piece of information, which has a separate container:

< Div Class = "Quick-alert" > Warning. Welcome to lulustudio! </ Div >

Oh, we also need to put our button in HTML, like this:

<Input type = "button" id = "show-alert" value = "show alert"/>

CSS

Now I may also need"Quick-alert "DefinitionOne style:

. Quick-alert {} {
Width : 50% ;
Margin : 1em 0 ;
Padding : . 5em ;
Background : # FFA ;
Border : 1px solid # a00 ;
Color : # A00 ;
Font-weight : Bold ;
Display : None ;
  }

I will put this in my stylesheet, so it will be applied to our new Div generated by the button.

Insert content

EnterCode! First, when someone clicks "show warning", our warning information will be inserted. Let's put the warning information to the right of the button, like:

$ (Document). Ready ( Function (){
$ ( ' # Show-alert ' ). Click ( Function (){
$ ( ' <Div class = "Quick-alert"> alert! Watch me before it \ ' S too late ! < / Div> ')
. Insertafter ($ ( This ));
});
});

So, basically, what I said is that clicking the <input id = "show-alert"/> button will generate a div containing this class and all the text in it, place the generated Div to the right of the button. The backslash in the "It \'s" idea. This is a required single quotes escape character, because otherwise "javascript will parse it as the end symbol of the string" (Original: notice the backslash in "it \'s ."That keeps jquery from getting confused That escapes the single quote, which is necessary because otherwise-As Dave Cardwell explains in his comment-"The javascript parser wowould interpret that as the close of the string .")

Add Effect

So far, everything went well. Now I will add my. Fadein ()And. Fadeout ()Effect. After that, I will remove the Div I just created. There is no need to keep it:

$ (Document). Ready ( Function (){
$ ( ' # Show-alert ' ). Click ( Function (){
$ ( ' <Div class = "Quick-alert"> alert! Watch me before it \ ' S too late ! < / Div> ')
. Insertafter ($ ( This ))
. Fadein ( ' Slow ' )
. Fadeout ( ' Slow ' , Function (){
$ ( This ). Remove ();
});
});
});

Because I will$ (This). Remove ()Put in. Fadeout () method callback (Callback)In. Fadeout ()Method.

Latency

This is a trick, right? Okay, I hope this is not a dirty trick (DirtyTrick), but here there will be the complete code:

$ (Document). Ready ( Function (){
$ ( ' # Show-alert ' ). Click ( Function (){
$ ( ' <Div class = "Quick-alert"> alert! Watch me before it \ ' S too late ! < / Div> ')
. Insertafter ($ ( This ))
. Fadein ( ' Slow ' )
. Animate ({opacity: 1.0 }, 3000 )
. Fadeout ( ' Slow ' , Function (){
$ ( This ). Remove ();
});
});
});

You see. Animate ()Is it there? This makes it completely opaque for 3 seconds, but this div is already opaque, so it just sits there as if it did nothing for 3 seconds. Isn't that cute?