Javascript显示带有动画的onclick

Question

我想要动画一个简单的搜索表单。在单击事件之前，它隐藏在我的修复导航栏(margin-top:-47px)后面。当用户单击搜索按钮时，我希望将表单的空白处-顶部属性设置为0px，以便在页面上显示。

jsFiddle

我正在使用这个HTML：

<nav>
  <a data-icon="search" class="search-form-toggle"></a>

...
<div class="form search-form">
                <fieldset data-icon="search">
                    <input type="search" placeholder="Search...">
                </fieldset>
            </div>

还有这个CSS：

.search-form {
    margin-top: -47px;
}

和以下javascript (jQuery)：

$('.search-form-toggle').click(function(){
    if($(".search-form").css("margin-top") == "-47px") {
        $(".search-form").animate({margin-top: "0px"}, 1000);
    } else {
        $(".search-form").animate({margin-top: "-47px"}, 1000);
    }
    return false;
});

当我点击按钮时，它不工作...我猜是Javascript的问题吧？

另外，我可以在不使用jQuery的情况下实现相同的结果(很好的过渡)吗？

Answer 1

给出的答案对我的代码调试非常有帮助。然而，当我找到animte.css时，我选择了另一种选择。它是一个CSS库，为div和其他工具提供了多种动画。

我也在使用QuoJS，我不想将jQuery添加到我的加载时间中，特别是因为我是为移动设备开发的。

下面是我的最终代码：

JS：

搜索函数(){ var document.querySelector(".search-toggle").addEventListener("click"，= $$(".search- form ")；

if (form.hasClass('display')) {
    form.removeClass('display');
} else {
    form.addClass('display animated flipInX');
}

})；

CSS：

.search-form {
    display:none;
}

.display {
    display:block;
}

首先，我的div只有.search-form类，所以不显示它。我用addClass()函数添加了带有QuoJs的.display类。

多亏了animate.css，过渡过程非常流畅。

Answer 2

错误出现在.animate()中，应该是：

$(".search-form").animate({'margin-top' : '0px'}, 1000);

和

$(".search-form").animate({margin-top: "-47px"}, 1000);

您忘记了margin-top周围的引号

这是我的工作重点，但请确保添加了附加的ajax文件

Fiddle

Answer 3

这就是有用的小提琴。你忘了加引号了。

.animate({"margin-top": "XXpx"});

http://jsfiddle.net/5xxWu/