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

【问题标题】：No result when animating styles in JQuery在 JQuery 中动画样式时没有结果
【发布时间】：2014-06-19 08:47:38
【问题描述】：

我正在使用以下代码为 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/

【问题讨论】：

使用 CSS transition 代替 jQuery animate。相信我。

标签： jquery jquery-animate

【解决方案1】：

1)trigger 是 id ，您的 jquery 代码中缺少“#”。
2) 将您的 jquery 代码包装在 document.ready 中。

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

请参阅this fiddle。

【讨论】：

如果你在你的小提琴中使用document.ready，你应该把左边的“onLoad”变成“No wrap - in ”，否则真的有点矫枉过正
@myfunkyside：哎呀！！。谢谢没有注意到。我会更新它

【解决方案2】：

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

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

JavaScript：

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

【讨论】：