-1

こんにちは、jquery の初心者です。アニメーションに影響する値をユーザーに入力させようとしています。（上または下に移動）これは私がこれまでに持っているもので、アニメーション化するために値を渡すことができないようです。

html

<select id="selectBox">
<option selected="selected" class="selectBox" value="top">Top </option>
<option class="selectBox" value="bottom">Bottom </option>
</select>

<input type="text" id="value" />
<input id="button" name="button" value="Animate" type="button"> 

<div class="box"style="height:100px; width:300px; padding: 35px; margin:50px auto; 
border:30px solid #000;">

javascript/jquery

< script type = "text/javascript" >

$("#button").click(function() {
var boxType = $('#selectBox').val();
var value = $('#value').val();

console.log(boxType + " " + value);

if (boxType == "top") {
    $(".box").stop().animate({
        marginTop: $('input').val('changed input value');
    }, 1000);
}
if (boxType == "bottom") {
    console.log("marginBottom")
    $(".box").stop().animate({
        marginBottom: $('input').val('changed input value');
    }, 1000);
}
}); < /script>​

here it is on JSFIDDLE

http://jsfiddle.net/X5Dd4/

4

1 に答える 1

1

次の 2 行の末尾にあるセミコロンを削除する必要があります。

marginTop: $('input').val('changed input value');
...
marginTop: $('input').val('changed input value');

...オブジェクトリテラル内では無効であるためです。.val()しかし、入力の値を設定するための呼び出しも、これらの行では意味がありません。valueユーザーが入力したものを既に保持しているコードの先頭に設定した変数を使用するだけです。

このようなもの：

if (boxType == "top") {
    $(".box").stop().animate({
        marginTop: value
    }, 1000);
}
if (boxType == "bottom") {
    console.log("marginBottom")
    $(".box").stop().animate({
        marginBottom: value 
    }, 1000);
}

そして、あなたのフィドルでは、JS ウィンドウ内からタグ<script>とタグを削除する必要があります。そこに表示されるコードは、ハンドラーの本体です。</script>onload

デモ: http://jsfiddle.net/X5Dd4/1/

マージンの下部をアニメーション化することは、ボックスの下にあるものを押し下げるだけで、その下には何もないため、フィドルではあまりエキサイティングではないことに注意してください。

(また、コードにconsole.log()ステートメントが含まれていることを考えると、コンソールを見ていませんか? 私があなたのフィドルに行ったとき、セミコロン エラーと<script>タグの問題の両方がコンソールで報告されました。)

于 2012-12-15T10:49:06.347 に答える