jQueryアニメーション機能は1回だけ動作します

Question

jQueryアニメーション機能を使用してSVGにスイッチがありますが、私の「サークル」SVG要素の「cs」属性に適用されます。

$('#filtres-reglages ul li label input:checkbox').click(function (e) { 
    var oswitch = $(this).parent().find("svg#switch"); 
    var path = oswitch.find("path"); 
    var circle = oswitch.find("circle"); 

    if($(this).is(':checked')) { 
     $(circle).animate(
      {'foo':20}, 
      { 
       step: function(foo) { 
        $(this).attr('cx', 10+foo); 
       }, 
       duration: 200 
      } 
     ); 
    } else { 
     $(circle).animate(
      {'foo':20}, 
      { 
       step: function(foo) { 
        $(this).attr('cx', 30-foo); 
       }, 
       duration: 200 
      } 
     ); 

    } 
}); 

HTML：

<label> 
    <svg id="switch" class="switch-off" xml:space="preserve" enable-background="new 0 0 40 20" viewBox="0 0 40 20" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
     <g> 
      <g> 
       <path d="M30,0L30,0L30,0H10C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10h20l0,0h0c5.5,0,10-4.5,10-10C40,4.5,35.5,0,30,0z " fill="#CCCCCC"> 
      </g> 
      <g> 
       <circle r="8" cy="10" cx="10" fill="#FFFFFF"> 
      </g> 
     </g> 
    </svg> 
    <input type="checkbox" name="champs_societes[]" value="capital_int"> 
    <span>Capital</span> 
</label> 

私のチェックボックスをチェックするとチェックされていないときに私は、CXをインクリメントし、私がデクリメント。

しかし、プログレッシブアニメーションは初めての動作です。その後、スイッチは30から10に、10から30に直接切り替わります。なぜですか？あなたが何をしたいか助け

Answer 1

ため

おかげで再び0に続い0から20までのfooをアニメーション化しています。あなたが実際に何をしていた

は0〜20、その後に20しかし、あなたが実際に一つだけのアニメーションの段階で（30-20）に20から飛び降りたように、第2の部分にあなたは、30から値を引いたのでした。

は、ここであなたがやっているべきものです：

$('label input:checkbox').click(function (e) { 
 
    var oswitch = $(this).parent().find("svg#switch"); 
 
    var path = oswitch.find("path"); 
 
    var circle = oswitch.find("circle"); 
 

 
    if($(this).is(':checked')) { 
 
     $(circle).animate(
 
      {'foo':20}, 
 
      { 
 
       step: function(foo) { 
 
        $(this).attr('cx', 10+foo); 
 
       }, 
 
       duration: 200 
 
      } 
 
     ); 
 
    } else { 
 
     $(circle).animate(
 
      {'foo':0}, 
 
      { 
 
       step: function(foo) { 
 
        $(this).attr('cx', 10+foo); 
 
       }, 
 
       duration: 200 
 
      } 
 
     ); 
 

 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label> 
 
    <svg id="switch" class="switch-off" xml:space="preserve" enable-background="new 0 0 40 20" viewBox="0 0 40 20" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
     <g> 
 
      <g> 
 
       <path d="M30,0L30,0L30,0H10C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10h20l0,0h0c5.5,0,10-4.5,10-10C40,4.5,35.5,0,30,0z " fill="#CCCCCC"/> 
 
      </g> 
 
      <g> 
 
       <circle r="8" cy="10" cx="10" fill="#FFFFFF"/> 
 
      </g> 
 
     </g> 
 
    </svg> 
 
    <input type="checkbox" name="champs_societes[]" value="capital_int"> 
 
    <span>Capital</span> 
 
</label>