-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

您需要删除这两行末尾的分号：

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>and</script>标记 - 您在那里显示的代码是onload处理程序的主体。

演示：http: //jsfiddle.net/X5Dd4/1/

请注意，在小提琴中为边缘底部设置动画并不是很令人兴奋，因为它只是将框下方的任何东西向下推，而它下方没有任何东西。

（另外，鉴于您的代码中有一条console.log()语句，您不是在看您的控制台吗？当我去找您的小提琴时，分号错误和<script>标签问题都在控制台中报告。）

于 2012-12-15T10:49:06.347 回答