Detailed example of implementing picture sliding door animation effect based on 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. This article mainly shares two methods to 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 jQuery automatic or manual image switching effects

Detailed examples of JS implementation of paging Browse horizontal images

jQuery implements preview function before uploading image files

The above is the detailed content of Detailed example of implementing picture sliding door animation effect based on jQuery. For more information, please follow other related articles on the PHP Chinese website!