2

幅150pxにアニメートするバーを作ることができました。今、私はそれを元の位置に戻そうとしていますが、それは最後に達したときだけです。なぜ条件付き：if（$（'＃indicator'）。width（）> '149px'）が機能しないのですか？これをうまく行う方法は？

$(function(){        
  $("#play").click(function() {
    $("#indicator").animate({"width": "150px"}, 8400);
  });

  // indicador back to 0
  if ($('#indicator').width() > '149px') {
      $("#indicator").animate({"width": "1px"}, 100);
  }
});

ここで確認して再生します：http：//jsfiddle.net/SwkaR/

4

5 に答える 5

4

質問1

インジケーターを元の位置に戻すための関数は、DOMの準備ができた直後に実行されます（$(function() { /* code for when the dom is ready */ });。

質問2

Javascriptは非同期であるため、アニメーションのコールバックを作成する必要があります。

$(function(){

  $("#play").click(function() {
      $("#indicator").animate({"width": "150px"}, { duration: 8400, complete: function() {
          $("#indicator").animate({"width": "1px"}, 100);
      }});
  });

});

http://jsfiddle.net/zEwHx/

于 2013-02-02T15:36:32.880 に答える
2 
if ($('#indicator').width() > 149)

jQuerywidth()関数は、文字列ではなく、幅の値の整数を返します。これには、pxなどの単位も含まれます。

プログラムに論理エラーがあります。関数を連鎖させることができanimate()ます。最初の機能が完了すると、自動的に2番目に移動します。

$(function(){
  $("#play").click(function() {
      $("#indicator").animate({"width": "150px"}, 8400).animate({ "width" : "1px" }, 100);
  });
});
于 2013-02-02T15:34:29.467 に答える
1

幅は数値を返します：

.css（width）と.width（）の違いは、後者は単位のないピクセル値（たとえば、400）を返すのに対し、前者は単位がそのままの値（たとえば、400px）を返すことです。

于 2013-02-02T15:36:07.920 に答える
0

のような文字列に対して算術比較を行うことはできません'149px'。代わりにを使用する必要があります> 149。またはさらに良い（より読みやすい）、>= 150

于 2013-02-02T15:35:45.843 に答える
0

これを試してください...使用$(function)しないでください.on...

$("#play").on('click', function() {  
      $("#indicator").animate({"width": "150px"}, {duration:8400, complete:function(){
          $("#indicator").animate({"width": "1px"}, 100);
      }});
});

jsFiddleの例

于 2013-02-02T15:49:27.783 に答える