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

  <p>
    </p>

             
•       
•       
•       
•       
•     

  

jQuery implementation

<script></script>
<script>
  $(function(){
    //1遍历每一张li 获取每个元素设置对应的图片
    var lis = $(&#39;li&#39;);
    lis.each(function(index, element){
      //通过设置背景图片名称改变图片的显示
      var imgName = "images/slidepic" + (index + 2) +".jpg ";
      $(element).css(&#39;background&#39;, "url(&#39;"+ imgName +"&#39;)")
    });
    //2.展开状态
    //鼠标滑入改变对应图片宽度800 其他图片(兄弟)改为100
    lis.mouseenter(function(){
      // console.log(this); 当前的li DOM元素
      //当前的图片的宽度变为800
      $(this).stop().animate({width: 800});
      //其他图片的宽度变为100
      $(this).siblings(&#39;li&#39;).stop().animate({width: 100});
    });
    //3鼠标滑出是全部显示为收缩状态
    lis.mouseout(function(){
      lis.stop().animate({width: 240});
    });
  })
</script>

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

  <p>
    </p>

      
• 
      
• 
      
• 
      
• 
      
• 
    

  

jQuery implementation

<script></script>
<script>
  $(function(){
    //1获取所有的图片 设置初始的收缩状态left:i*200
    var lis = $(&#39;li&#39;);
    for(var i = 0; i < lis.length; i++){
      lis.eq(i).css({left:i*200 + &#39;px&#39; });
    }
    //2.设置hover内置函数,实现鼠标滑入展开滑出收缩效果
    lis.hover(function(){
      var index = $(this).index(); //DOM对象转换jQuery对象
      //2.1鼠标滑入后,当前图片的前面图片偏移位置减小到 j*100位置
      for(var j = 0; j <= index; j++){
        lis.eq(j).stop().animate({left: j*100 + &#39;px&#39;},300);
      }
      //2.2鼠标滑入后,当前图片的后面图片偏移位置扩大到 500+j*100位置
      for(var j = index + 1; j < lis.length; j++){
        lis.eq(j).stop().animate({left: 500+j*100 + &#39;px&#39;},300);
      }
    },function(){ //2.3鼠标滑出后,所有图片恢复到原来的位置 i*200
      for(var i = 0; i < lis.length; i++){
        lis.eq(i).stop().animate({left: i*200 + &#39;px&#39;},300);
      }
    });
  })
</script>

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!