목록 항목 높이가 바뀌는 바운스 효과 js

이 작업을 해독하려고합니다. 목록 항목을 버튼 클릭시 2 번 바운스해야합니다. 그러나 처음으로 바운스 거리의 40 %로 두 번째로 바운스해야합니다. 목록 요소에서 간단한 바운스 만 구현할 수 있었지만 바운스 거리를 어떻게 구현할 수 있는지 찾을 수 없었습니다. 도와 주실 수 있나요? 나는 귀하의 조언에 매우 감사 할 것입니다!목록 항목 높이가 바뀌는 바운스 효과 js

코드는 :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
<head> 
    <title>Bounce Effect</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script> 
    <style> 
     ul li{ 
      list-style-type: none; 
     } 

     li { 
      float:left; 
      margin-right:10px; 
     } 
    </style> 
</head> 
<body> 
    <h2>Bounce Effect!</h2> 
    <button id="button" onclick="bounceEffect()">Click me!</button> 
    <h2 id="header">Bouncer!</h2> 
    <div id="list"> 
     <ul> 
      <li id="a"><a href="#">1</a></li> 
      <li id="b"><a href="#">2</a></li> 
      <li id="c"><a href="#">3</a></li> 
      <li id="d"><a href="#">4</a></li> 
      <li id="e"><a href="#">5</a></li> 
      <li id="f"><a href="#">6</a></li> 
     </ul> 
    </div>  
    <script type="text/javascript"> 
     function bounceEffect(){ 
      $(document).ready(function() { 
       $('button').click(function() { 
        $('li a').effect("bounce", {times: 2}, 300); 
       }) 
      }); 
     } 
    </script> 
</body> 
</html>

출처

2017-05-05 Cassie

내 문제에 대한 해결책을 발견했다. 방금 거리를 매개 변수로 사용하고 외부 변수의 도움을 받아 bounceEffect 함수에서 동적으로 변경했습니다. 조금 느리지 만 코드는 정상적으로 작동합니다. 희망, 누군가를 도울거야!

function bounceEffect() { 
      var distance = 60; 
      $(document).ready(function() { 
       $('button').click(function() { 
        $('li a').effect("bounce", {times: 2, distance: distance*=0.4}, 200); 
       }) 
      }); 
     }

출처

2017-05-05 11:24:21 Cassie

목록 항목 높이가 바뀌는 바운스 효과 js

답변

관련 문제