Sharing two ways to realize the animation effect of picture sliding door with jQuery

''Sliding door'' dynamic effect can also be called the "accordion" effect. The idea of realizing most effects is basically the same. Two methods are introduced below. One is to move the picture by changing the offset position. The other is to achieve transformation by traversing the background image and then changing the width of the image. The two methods in this article achieve the "sliding door" animation effect, which can also be called the accordion effect. Let's learn the specific implementation methods through this article. I hope it can help everyone.

Implementation method one: change the image width

html+css code

jQuery implementation

jQuery streamlined code

//精简代码 $(function(){ $('li').each(function(index, element){ $(element).css('backgroud',"url('images/slidepic"+(index + 2)+.jpg')"); }).mouseenter(function(){ $(this).stop().animate({width: 800}).siblings().stop().aniamte(width: 100}); }).mouseout(function(){ $('li').stop().animate({width: 240}); }); })

Implementation method two: change the offset value of the image

html+css code

 
 
 
![](images/slidepic8.jpg)
 
![](images/slidepic3.jpg)
 
![](images/slidepic4.jpg)
 
![](images/slidepic5.jpg)
 
![](images/slidepic7.jpg)
 
 
  

jQuery implementation

Note: During the implementation of method one, pay attention to the width and image Named settings.

Tips: The jQuery code is used here, and the javaScript code can be implemented in the same way. Just modify the traversal process and built-in function methods, and rewrite the animation function (the previous notes have an encapsulated animate function , can be directly introduced and used).

Related recommendations:

Detailed examples of how to realize the picture sliding door animation effect based on jQuery

Detailed examples of jQuery and HTML5 implements WebGL high-performance fireworks bloom animation effect

How to create a web page with opening animation effect in Dreamweaver

The above is the detailed content of Sharing two ways to realize the animation effect of picture sliding door with jQuery. For more information, please follow other related articles on the PHP Chinese website!