Two very interesting jquery switching methods-hover-Toggle

Hover:

Hover is a custom method that describes status 1 and status 2. It is triggered by sliding the mouse. The effect is similar to that of onmousemove onmouseout. This state is described in a small example. In fact, hover is widely used in complex animation rich web applications. Among the function () {}, function () {} callback functions, we can use a wide range of extensions.

. Hover (function () {...}, function (){..});

 <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  >  <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"   >  <  Head >      <  Title  > Untitled page </  Title  >      <  Style  Type  = "Text/CSS"  >  # De  {}      </  Style >      <  Script  Type  = "Text/JavaScript"  SRC  = "Jquery-1.6.4.min.js"  > </  Script  >      <  Script  Type  = "Text/JavaScript"  >  $ ( Function  (){  VaR  $ De  =  $ (  "  # De  "  ); $ De. Hover (  Function () {$ (  This  ).Css (  "  Background  "  ,  "  # Ccc  "  );},  Function () {$ (  This  ).Css (  "  Background  "  ,  "  #999  "  );});});  </ Script  >  </  Head  >  <  Body  >      <  A  Href  = "#"  ID  = "De"  > Content </  A >  </  Body  >  </  Html  > 

Toggle:

In jquery, toggle is a fun idea. It is used to bind multiple event processor functions to respond to the rotating click events of the selected elements. If the element is visible, switch to hidden. If the element is hidden, switch to visible.

. Toggle (function () {}, function (){},....);. toggle (speed, function (){});. toggle (speed, easing, function (){});

Speed: Display and hide speed. The default value is 0.

Easing: Specifies the switching effect. The default value is swing, and the optional value is linear.

The. Toggle () method also has a Switch Parameter format. For example, I set a parameter to int, $ ("..."). Toggle (INT ). It has the following similar effects:

Int? $ (".."). Show (): $ (".."). Hide ();

 <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  >  <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"   >  <  Head  >      <  Title  > Untitled page </  Title >      <  Style  Type  = "Text/CSS"  >  # De  {}  . De  {  Background  :  # Ccc ;  Width  :  50px  ;  Height  :  50px  ;  Margin-top  :  50px ;  Display  :  None  ;  }      </  Style  >      <  Script  Type  = "Text/JavaScript"  SRC = "Jquery-1.6.4.min.js"  > </  Script  >      <  Script  Type  = "Text/JavaScript"  >  $ (  Function  (){  VaR  $ De =  $ (  "  # De  "  ); $ De. Toggle (  Function  () {$ (  "  . De  "  ). Fadein ( "  Slow  "  );},  Function  () {$ (  "  . De  "  ). Fadeout (  "  Slow "  );});});  </  Script  >  </  Head  >  <  Body  >      <  A  Href  = "#"  ID = "De"  > Content </  A  >      <  Div  Class  = "De"  > </  Div  >  </  Body  >  </  Html >