jQuery effects

jQuery Effects - Hide and Show

Hide, show, toggle, slide, fade, and animate!

jQuery hide() and show()

Passed jQuery, you can use the hide() and show() methods to hide and show HTML elements

Syntax:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

The optional speed parameter specifies the speed of hiding/showing, and can take the following values: "slow", "fast" or milliseconds.

The optional callback parameter is the name of the function to be executed after hiding or displaying is completed.

jQuery toggle()

With jQuery, you can use the toggle() method to toggle the hide() and show() methods.

Show hidden elements and hide displayed elements.

Syntax:

$(selector).toggle(speed,callback);

The optional speed parameter specifies the speed of hiding/showing, and can take the following values: " slow", "fast" or milliseconds.

The optional callback parameter is the name of the function executed after the toggle() method is completed.

      
  隐藏/显示 
  
这是一张图片
 
  

Fade in and out

jQuery Fading method

With jQuery, you can achieve the fading effect of elements.

jQuery has the following four fade methods:

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

jQuery fadeIn() method

jQuery fadeIn() is used to fade in hidden elements.

Syntax:

$(selector).fadeIn(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. .

The optional callback parameter is the name of the function to be executed after fading is completed.

jQuery fadeOut() method

jQuery fadeOut() method is used to fade out visible elements.

Syntax:

$(selector).fadeOut(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function executed after fading is completed.

jQuery fadeToggle() method

jQuery fadeToggle() method can switch between fadeIn() and fadeOut() methods.

If the element is already faded out, fadeToggle() will add a fade-in effect to the element.

If the element is already faded in, fadeToggle() will add a fade out effect to the element.

Syntax:

$(selector).fadeToggle(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function executed after fading is completed.

      
  
实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。
 点击淡入/淡出 

 
 
 
 
 
  

jQuery fadeTo() method

jQuery fadeTo() method allows a gradient to a given opacity (a value between 0 and 1).

Syntax:

$(selector).fadeTo(speed,opacity,callback);

The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The required opacity parameter in the fadeTo() method sets the fade effect to the given opacity (a value between 0 and 1).

The optional callback parameter is the name of the function to be executed after the function is completed.

Sliding

jQuery sliding method

With jQuery, you can create sliding effects on elements.

jQuery has the following sliding methods:

slideDown()

slideUp()

slideToggle()

jQuery slideDown () Method

jQuery slideDown() method is used to slide the element down.

Syntax:

$(selector).slideDown(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function executed after the sliding is completed.

jQuery slideUp() method

jQuery slideUp() method is used to slide elements up.

Syntax:

$(selector).slideUp(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function executed after the sliding is completed.

       
  
点我拉起面板
 
Hello world!
  

jQuery slideToggle() method

jQuery slideToggle() method can switch between slideDown() and slideUp() methods.

If elements slide down, slideToggle() slides them up.

If elements slide up, slideToggle() slides them down.

$(selector).slideToggle(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function executed after the sliding is completed.

Animation

jQuery animation - animate() method

jQuery animate() method for creating custom animations.

Syntax:

$(selector).animate({params},speed,callback);

Required params parameters define the CSS properties that form the animation.

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function to be executed after the animation is completed.

      
  开始动画 
默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!
 
 
  

jQuery stop animation

jQuery stop() method

jQuery stop() method Used to stop animations or effects before they are completed.

The stop() method works with all jQuery effect functions, including slides, fades, and custom animations.

grammar:

$(selector).stop(stopAll,goToEnd);

The optional stopAll parameter specifies whether the animation queue should be cleared. The default is false, which only stops active animations, allowing any queued animations to execute backwards.

The optional goToEnd parameter specifies whether to complete the current animation immediately. The default is false.

So, by default, stop() will clear the current animation specified on the selected element.

The following example demonstrates the stop() method without parameters:

       
  停止滑动 
点我向下滑动面板
 
Hello world!