jquery를 사용하여 아코디언 효과를 구현하는 방법-JS 튜토리얼-php.cn

jquery를 사용하여 아코디언 효과를 구현하는 방법

亚连

풀어 주다： 2018-06-08 15:48:27

원래의

1550명이 탐색했습니다.

이제 아코디언 효과를 구현하기 위한 jquery 애플리케이션 example_sample 코드를 공유하겠습니다. 매우 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

효과:

예는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  *{padding: 0px;margin: 0px;}
  li{
   width: 80px;height:300px;
   float: left;overflow: hidden;
   list-style: none;
  }

 </style>
 <script type="text/javascript "src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<script >
 $(function () {
  $("ul li").mouseover(function (){
   $(this).stop().animate({width:350},500)//stop函数：停止当前正在运行的动画
   //siblings:遍历
   $(this).siblings().stop().animate({width:80},500)//anmate：500ms后将其width变为80px；
  })
 })
</script>
<p>
 <ul>
 <li style="width: 350px"><img src="1.jpg"></li>
 <li><img src="2.jpg"></li>
 <li><img src="3.jpg"></li>
 <li><img src="4.jpg"></li>
 <li><img src="5.jpg"></li>
 </ul>
</p>
</body>
</html>

로그인 후 복사

위 내용은 앞으로 모든 분들께 도움이 되기를 바랍니다.

jquery.picsign에서 이미지 주석 컴포넌트를 사용하는 방법

webpack을 통해 koa2 프레임워크 앱을 패키징하는 방법, 어떻게 해야 하나요?

Vue 컴포넌트 개발 아이디어에 대한 자세한 해석

위 내용은 jquery를 사용하여 아코디언 효과를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!