jquery - jQueryは、テキスト入力の変更後にdivを移動します

Question

2 つの別々のテキスト フィールド入力からの入力が変更された後、画像ホルダー div を特定の x 座標と y 座標に移動しようとしています。以下は x 座標のみのコードです。

ここにjfiddleがあります

var img1x;
var img1y;
var img1position;

img1position = $( "#img1" ).position();
img1x = img1position.left;
img1y = img1position.top;

私はこれを試しましたが、入力値が「0」の場合にのみdivを移動します。それは他の何のためにも動かない：

$("#img1x").change(function() {
  //alert("img1x: " +img1x);
    $( "#img1" ).css('left', $( "#img1x" ).val());
});

私はこれを試しましたが、何もしません。

$("#img1x").change(function() {
  img1x = $( "#img1x" ).val();
  //alert("img1x: " +img1x);
    $( "#img1" ).css('left', img1x);
});

Answer 1

追加してみてください'px'：

$("#img1x").change(function() {
  img1x = $( "#img1x" ).val();
  alert("img1x: " +img1x);
    $( "#img1" ).css('left', img1x + "px");
});

私のために働く：http://jsfiddle.net/VNqqx/

機能する理由は、有効な CSS0であるためです。left: 0

Answer 2

流体遷移のためにこれを試すことができます

$("#img1x").change(function () {
    img1x = $("#img1x").val();
    alert("img1x: " + img1x);
    $("#img1").animate({
        'left': img1x
    }, 700);
});

その後は必要ありませんpx。

それをチェックしてくださいhttp://jsfiddle.net/dhpkW/6/

Answer 3

'px' または * 1 を追加して int を取得してみてください:

$( "#img1" ).css('left', img1x + 'px');

http://jsfiddle.net/dhpkW/1/を参照

Answer 4

左の値に「px」を追加します。

$( "#img1" ).css('left', img1x+'px');