0

単純な検索フォームをアニメーション化したいと考えています。クリック イベントの前は、固定ナビゲーション バー ( margin-top:-47px) の後ろに隠れています。ユーザーが検索ボタンをクリックすると、フォームの margin-top プロパティを 0px に設定して、ページに表示されるようにします。

jsフィドル

私はこの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 を見つけたときは、別のオプションを使用しました。divなどに複数のアニメーションを提供するCSSライブラリです。

私も QuoJS を使用していましたが、特にモバイル デバイス向けに開発しているため、読み込み時間に jQuery を追加したくありませんでした。

これが私の最終的なコードです:

JS:

document.querySelector(".search-toggle").addEventListener("クリック", 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 に答える