How to achieve accordion effect with jQuery

In jQuery, the accordion effect is mainly achieved by setting the width of animate when the mouse slides in or out.

Today I will introduce to you how to use jQuery to achieve the accordion effect. That is, when the mouse enters, it will expand and when it slides out, it will become smaller.

[Recommended course: jQuery Tutorial】

Knowledge points required to achieve the accordion effect

(1) Traverse all the items through a for loop Picture, use the eq() method in jQuery to select the li tag and add a background image to it

eq(index) method: indicates the position of the element (minimum is 0), if it is a negative number, it will be from the last one in the collection Counting back one element.

$(".box>ul>li").eq(i).css("backgroundImage","url(image/"+(i+1)+".jpg)");

(2) mouseenter(): When the mouse pointer slides into the element, an event will be triggered, that is, the function that is run when the mouseenter event occurs

(3) mouseleave(): When the mouse When the pointer leaves the element, an event is triggered, specifying the function to be run when the mouseleave event occurs. This event is most often used together with the mouseenter event.

(4) stop(stopAll,goToEnd): Stop the currently running animation.

stopAll: Whether to stop all queued animations of the selected element,

goToEnd: Whether to allow the current animation to be completed.

Both parameters are optional, but the goToEnd parameter can only be used when the stopAll parameter is set, and cannot be used alone

(5) siblings (selector): Get the matching set of each element and filtering by selector is optional.

selector refers to a string value that refers to the selector expression used to match elements.

(6) animate() method: Execute custom animation of CSS property set. This method changes the element from one state to another through CSS styles. Note that only numeric values ​​can create animations, and string values ​​cannot create animations.

Note: When writing animation, be sure to add stop() to stop the original animation to prevent animation overlap and affect the effect.

Complete code display

<script>
$(function(){
for(var i=0;i<$(".box>ul>li").length;i++){
$(&quot;.box&gt;ul&gt;li&quot;).eq(i).css(&quot;backgroundImage&quot;,&quot;url(image/&quot;+(i+1)+&quot;.jpg)&quot;);
  }
 $(".box>ul>li").mouseenter(function(){
//  鼠标滑过时li的宽度为800，离开时为240
$(this).stop().animate({width:800}).siblings().stop().animate({width:100}).mouseleave
(function(){
   $(".box>ul>li").stop().animate({width:240})
 })
 })
 })
</script>

Rendering

Animation Demonstration

Summary: The above is the entire content of this article. I hope that through this article, everyone can Learn how to create an accordion effect with jQuery.

The above is the detailed content of How to achieve accordion effect with jQuery. For more information, please follow other related articles on the PHP Chinese website!