0

div がいつアニメーション化されるかに基づいて高さや幅を動的に設定する方法に興味がありました。

Jクエリ

$(document).ready(function() {
  var div1dimensions = 50 / 180 +'px';  
  $("#div1").animate({
    width: divdimensions,
    height: "100px",
    opacity: 1,
  }, 1500 );
});

変数を作成して、幅または高さの場所に配置することはできませんか? それとも、100px などの CSS 値のみですか?

ありがとうございました。

4

1 に答える 1

1

重要なことは、.css()メソッドのオブジェクト形式を使用する場合、そこに配置された数値は本質的にピクセル値であると想定されることです。

$(document).ready(function() {
  var div1dimensions = (50 / 180);  

  $("#div1").animate({
    width: div1dimensions,
    height: 100,
    opacity: 1,
  }, 1500 );
});

引用符がないことに注意してください。このようにすれば、変数を非常に簡単に使用できます。

$(document).ready(function() {
  var div1dimensions = (50 / 180),
      divHeight = div1dimensions * 1.5;  

  $("#div1").animate({
    width: divdimensions,
    height: divHeight,
    opacity: 1,
  }, 1500 );
});

または、必要な他の変数計算、これは単なる例です。さらに、jQuery 1.4 以降では、その計算のために関数を渡すことができます。jQuery .css() ドキュメントで使用されている例は、例を反映するように変更されています。

$(document).ready(function() {
  var div1dimensions = (50 / 180);  

  $("#div1").animate({
    width: div1dimensions,
    height: function(i){
        return i * 50;
    },
    opacity: 1,
  }, 1500 );
});

これはすぐにややこしくなる可能性があり、実際には非常に特定のシナリオでのみ役立ちますが、必要な場合には便利です。

于 2013-11-13T17:51:29.447 に答える