jQuery로 ul 목록 항목이 서로 퍼질 효과를 구현하는 예제

이 표본은 jQuery가 animate를 사용하여 ul 목록 항목이 서로 흔들리는 효과를 구현하는 방법을 분석했습니다. 여러분께 공유하여 참고하기 위해 다음과 같이 구체적으로 설명합니다：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></제목>
  <style type="text/css">
    body{폰트-사이즈:12px; 마진:0px; 패딩:0px;}
    #main{width:600px;margin:auto;background-color:gold;}
    ul{float:left;margin:30px;width:80px;height:140px;padding:2px;background-color:#0099cc}
    #ulRight{margin-left:300px;}
    li{list-style-type:none;margin-top:3px;background-color:Gray;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("li[name='pigeon']").click(function () {
        //开始飘动的位置,由于ulRight的margin-left为300px所以要加300,同理leftUl也一样
        var rightUlLeft = parseInt($("#ulRight").position().left + 300) + "px";
        var leftUlLeft = parseInt($("#ulLeft").position().left + 30) + "px";
        if ($(this).parent().attr("id") == "ulLeft") {
          $(this).queue(function (next) {
            $(this).css({ "position": "absolute", "left": leftUlLeft });
            next();
          })
          .animate({ "left": rightUlLeft }, 2000)
          .queue(function () {
            $(this).appendTo("#ulRight").css({ "position": "static" });
            $(this).dequeue();
          });
        }
        else {
          $(this).queue(function (next) {
            $(this).css({ "position": "absolute", "left": rightUlLeft });
            next();
          })
          .animate({ "left": leftUlLeft }, 2000)
          .queue(function () {
            $(this).appendTo("#ulLeft").css({ "position": "static" });
            $(this).dequeue();
          });
        }
      });
    });
  </script>
</head>
<body>
  <div id="main">
    <ul id="ulLeft">
      <li name='pigeon'>백쭉</li>
      <li name='pigeon'>화쭉</li>
      <li name='pigeon'>검쭉</li>
      <li name='pigeon'>회쭉</li>
      <li name='pigeon'>적쭉</li>
      <li name='pigeon'>홍쭉</li>
    </ul>
    <ul id="ulRight">
    </ul>
    <div style="clear:both;"></div>
  </div>
</body>
</html>

jQuery 관련 내용에 대해 더 알고 싶은 독자는 다음과 같은 특집을 확인할 수 있습니다: 《jQuery 일반 플러그인 및 사용 방법 요약》、《jQuery 일반 클릭 효과 요약》、《jQuery form 작업 기술 요약》、《jQuery json 데이터 작업 기술 요약》、《jQuery 확장 기술 요약》、《jQuery 드래그 앤 드롭 효과 및 기술 요약》、《jQuery 테이블(table) 작업 기술 요약》、《jQuery Ajax 사용 요약》、《jQuery 애니메이션 및 효과 사용 요약》 및 《jQuery 선택자 사용 요약》

본문에서 설명한 내용이 여러분의 jQuery 프로그래밍에 도움이 되길 바랍니다.

고지사항: 본문은 인터넷에서 가져왔으며, 저작권자는 본사이트에 소유되어 있지 않으며, 인터넷 사용자가 자발적으로 기여하고 자체적으로 업로드한 내용으로, 본 사이트는 인공적으로 편집되지 않았으며, 관련 법적 책임을 부담하지 않습니다. 저작권 위반이 의심되는 내용을 발견하시면, 이메일을 notice#w로 보내 주세요.3codebox.com에 이메일을 보내면 (#을 @으로 변경해 주세요) 신고하시고 관련 증거를 제공하시면, 실제로 확인되면 이 사이트는 즉시 저작권 위반 내용을 삭제합니다.

기본 가이드

좋아하는 것