jquery based on toggle implementation of Click Trigger div display and hidden problem analysis _jquery

This example describes the display and concealment of jquery based on toggle implementation Click Trigger Div. Share to everyone for your reference, specific as follows:

studied the toggle click Trigger div Display and hide, now send the code up.

HTML code:

<input type= "button" id= "BTN" title= "Click me you will see the effect" value= "click here"/> <div id=
"content" style= "padding : 10px; margin-top:5px; border:1px dotted #BBB; " >
<p> Switch the function you want to call each time you click. <br/> If a matching element is clicked, the first specified function is triggered, and when the same element is clicked again, <br/>
triggers the specified second function. Successive calls to the two functions are repeated on each subsequent click.
You can use Unbind ("click") to delete. </p>
</div>

jquery Code:

Full version:

<script src= "Jquery.js" ></script>
<script language= "JavaScript" >
$ (
function () {
$ ("#btn"). Toggle (
function () {$ (this). Click (function () {$ ("#content"). Hide ();}),
function () {$ ( This). Click (function () {$ (' #content '). Show ();})})
</script>

Abbreviated version (recommended):

<script src= "Jquery.js" ></script>
<script language= "JavaScript" >
$ (function () {
$ (" #btn "). Toggle (
function () {$ (#content). Hide ();},
function () {$ (#content). Show ();})
</script>

Problem:

When using jquery toggle, click and Flash, Div comes out

<div >
   
</div>
<div id=" Font_div "style=" Display:none; " >
<ul>
<li>
<a style= "Color:black font-size:10px href=" "onclick=" NYSfont2 (' Black '), return false; > </a>
</li>
</ul>
<div>

Program as above, I would like to click on a picture to achieve font_div hide and display, but the reality is that when I clicked on the picture after the Font_div part is not very smooth on the display, but first the whole font_div display, and then again slowly show. It's like a flash, then realize the effect I want! Hidden time is the same, the first slowly hidden, when the hidden end followed by Flash again. Don't know what's going on here? PLEASE advise!!!!

Question added:

The problem's solved, because there's less in the file.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Plus this line is a little bit of a problem!

Workaround:

Here is a simple example that can achieve the above results:

 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  
 

More interested readers of jquery-related content can view the site's topics: A summary of Ajax usage in jquery, a summary of jquery table (table) operations tips, a summary of jquery drag-and-drop effects and techniques, a summary of jquery extension techniques, jquery Common Classic Effects Summary "jquery animation and special effects usage Summary", "jquery selector usage Summary" and "jquery common Plug-ins and Usage summary"

I hope this article will help you with the jquery program design.