Question

你好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/

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

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

请注意，设置边距底部的动画并不是非常令人兴奋，因为它只是推动框下方的任何内容，并且它下方没有任何内容。

（另外，鉴于您的代码中包含console.log()语句，您是不是在查看控制台？当我找到您的小提琴时，会出现分号错误和<script>标记问题在控制台中。）

让用户传递动画的值

1 个答案: