10

特定のリンクをクリックするとログインパネルがスライドダウンするWebサイトに取り組んでいます。event.preventDefault()サイトのリダイレクトを停止するために使用しているだけでなく、アニメーション イベントを使用してパネルを下にスライドさせています。リンクをクリックすると、パネルが下にスライドし、URL は変更されません。

リンクがクリックされたときに私がしたいことは、パネルが通常どおりアニメーション化されることですが、リンクの href 属性が URL に表示されることです。この場合、次のようになりますhttp://domain_name/#login。

これが私が今行っているコードです：

$("#login_link").click(function (e) {
    e.preventDefault();
    $("#login").animate({ 'margin-top': 0 }, 600, 'linear');

    window.location.hash = $(this).attr('href');
});

このコードは、必要に応じて「#login」を URL に正常に追加しますが、ログイン パネルのアニメーションをスキップします。リンクをクリックすると、パネルが即座に表示されます。アニメーションと更新された URL の動作の両方を保持したいと思います。これは可能ですか？

4

2 に答える 2

3

以下のコードを使用してください。アニメーション完了イベントでハッシュを呼び出すだけです。

$("#login_link").click(function (e) {
    e.preventDefault();
    $("#login").animate({ 'margin-top': 0 }, 600, 'linear', function(){  window.location.hash = $(this).attr('href'); });

});
于 2011-08-07T06:22:57.243 に答える
1

よくわかりませんが、この機能を探しているかもしれません

1> 何人かがログインをクリックすると、URL が abc.com/#login に変わり、ログイン パネルのアニメーションが発生する

また

2 > URL に abc.com/#login と入力しただけの場合、同じ動作 (ログイン パネルのアニメーション) が予想されます。

現在行っていることは、case1 でのみ機能し、case2 では機能しません。クリックしたとき、または単に URL を入力したときの両方でアニメーション (または何でも) を機能させたい場合。ハッシュの変更を検出するには、何らかのメカニズムが必要です。

有名なプラグインがありますhttp://benalman.com/projects/jquery-bbq-plugin/

このプラグインを見に行き、物事がどのように行われているかを見てください。わかりにくいことがあれば、ここにいます!!

于 2011-08-07T07:40:52.590 に答える