0

我想制作一个简单的搜索表单。在点击事件之前，它隐藏在我的修复导航栏 ( margin-top:-47px) 后面。当用户单击搜索按钮时，我想将表单的 margin-top 属性设置为 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 的情况下获得相同的结果（漂亮的过渡）吗？

4

3 回答 3

2

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

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

和

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

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

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

小提琴

于 2013-06-27T17:42:55.927 回答
1

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

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

http://jsfiddle.net/5xxWu/

于 2013-06-27T17:48:39.760 回答
0

给出的答案对调试我的代码非常有帮助。但是，当我找到 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 类，所以不显示。我添加了带有 QuoJs 的 .display 类和addClass()函数。

由于 animate.css，过渡非常流畅。

于 2013-06-27T18:26:44.930 回答