Jquery study notes 7 (jquery animation)

Animation in jquery One show () and hide () Methods The show () method and the hide () method are the most basic animations in jquery. Call hide to change the display style of the element "None" Element.css ( "Display" , "None" ); // Hide elements by using CSS. Call the show () method to set the dispaly style of the element to the previous display status ( "Block" , "Inline" Or other "None" ). $ ( "Element" ). Show (); The show () method specifies a speed parameter. You can specify a speed keyword slow $ ( "Element" ). Show ( "Slow" ); The elements will be displayed slowly within 600 milliseconds. In addition, the normal fast partition is 400 milliseconds and 200 milliseconds. You can also specify a number in milliseconds in the display speed. 2. fadein method and fadeout Method Unlike the show () method, the fadein () method can only change the opacity of an element. The fadeout () method reduces the opacity of an element within a specified period of time, until the elements completely disappear ( "Display: none" ) The fadein () method is the opposite. $ ( "# Panel h5.head" ). Toggle (function (){ $ ( This ). Next ( "Div. Content" ). Fadeout (); }, Function (){ $ ( This ). Next ( "Div. Content" ). Fadein ();   });   After clicking the link, the content gradually disappears and is displayed slowly again.   Three slideup () and slidedown () Methods The lsideup () method and the slidedown () method only change the height of an element. If the value of the display attribute of an element is "None" When the slidedown () method is called, this element is displayed from top to bottom, The slideup () method is the opposite. The elements are hidden from bottom to top, and the slideup () method and the slidedown () method are used "Content" The display and hide modes. $ ( "# Panel he. Head" ). Toggle (function (){ $ ( This ). Next ( "Div. Content" ). Slideup (); }, Function (){ $ ( This ). Next ( "Div. Content" ). Slidedown (); }); 4. Custom Animation method animate () Animate syntax Animate ( Params , Speed, callback ); (1) Params Use a ing containing style attributes, such as {property1: "Value1" , "Property2" : Value2} (2) speed, speed parameter, optional (3) callback: the function that is executed when the animation is completed. Optional.   The "Left" Style attribute. to affect the top left bottom right style attribute of the element, you must first set the position style of the element to relative or absolute $ (Function (){ $ ( "# Panel" ). Click (function (){ $ ( This ). Animate ({left: "500px" }, 3000) })   }) First "Panel" Creates a standalone event for the element, and then adds the animate () method to the element so that the element moves 3000 pixels to the right within 3 seconds (500 milliseconds) 2. add and subtract Animation If you add "+ =" Or "-=" It indicates accumulating or decreasing at the current position. $ (Function (){ $ ( "# Panel" ). Click (function (){ $ ( This ). Animate ({left: "+ = 500px" },300 ); }) }) 3. Multiple animations Execute multiple animations at the same time to zoom in the height of the element while sliding to the right, $ (Function (){ $ ( "# Myimg" ). Click (function (){ $ ( This ). Animate ({left: "500px" , Height: "200px" },3000 ); }) }) RunCodeWhen the <div> element slides to the right, the height is also enlarged. Execute multiple animations in sequence You just need to split the code and write it in order. $ ( This ). Animate ({left: "500px" },3000 ); $ ( This ). Animate ({height: "200px" },3000 ); You can also change the format to chained.

Source:Http://www.cnblogs.com/liuyong/