Question

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

我正在使用此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

错误在.animate（）中应该是：

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

和

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

您忘记了margin-top

周围的引号

这是我的工作小提琴，但请确保添加附加的ajax文件

Fiddle

Answer 2

这是工作小提琴。你忘了把引号。

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

http://jsfiddle.net/5xxWu/

Answer 3

给出的答案在调试我的代码时非常有用。但是，当我找到animte.css时，我选择了另一个选项。它是一个CSS库，为div和其他人提供多种动画。

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

这是我的最终代码：

JS：

document.querySelector（“。search-toggle”）。addEventListener（“click”，function（）{ var form = $$（“。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，过渡非常顺利。

Javascript显示onclick与动画

3 个答案: