Question

我正在使用以下代码为id为“div”的div的margin-top CSS样式设置动画。

HTML：

<div id="div">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
    <button id="trigger">
        Change Margin
    </button>
</div>

Javascript（在头部）：

<script type="text/javascript" src="scripts/jquery-1.11.0.min.js"></script>
<script>
$("trigger").mouseup(function() {
    $("div").animate({
        marginTop: "-20px"
    });
});
</script>

但是，当我点击按钮时，没有任何反应......为什么会这样？

JSFiddle：http://jsfiddle.net/zLx5U/

Answer 1

1）trigger是id，你的jquery代码中缺少'＃'。
2）将您的jquery代码包装在document.ready。

中

$(document).ready(function(){
$("#trigger").mouseup(function() {
    $("div").animate({
        marginTop: "-20px"
    });
});
});

请参阅this fiddle。

Answer 2

首先，正如其他答案所述，您的代码在jQuery元素选择器中缺少#。

此外，我强烈建议您避免使用javascript动画：尽可能使用CSS过渡，它的错误越来越少，操作也越来越容易。修改了Here's @Pdk1303's fiddle以使用CSS转换和类切换，因此如果单击按钮两次，则边距将恢复为默认值。

<强> JavaScript的：

$(document).ready(function(){
    $("#trigger").on("click", function(){
        $("div").toggleClass("lessMargin");
    });
});

在JQuery中动画样式时没有结果

2 个答案: