10

バックストーリー:自分用のポートフォリオ Web サイトを設計しています。ホームページでは、ロゴは正面中央にありますが、サブページではロゴは右上にあります。

jQuery を使用して、ページの中央から隅へのロゴの動きをアニメーション化するのは、(サブページへのリンクをクリックしたときの) 視覚的な手がかりになると思いました。

問題:サブページは、アニメーションが完了するよりも速く読み込まれます。

質問:アニメーションが完了するまでリンクの追跡を一時停止する方法はありますか?

4

8 に答える 8

31

また、false を返すか、アンカー クリック イベントのデフォルト アクションを防止する必要があります。そうしないと、ブラウザーは単に href に従います。とにかく、ライブ デモは 1000 語よりも優れていることに同意しました。

ライブデモはこちら

例えば

 $('#myLink').click( function(ev){
   //prevent the default action of the event, this will stop the href in the anchor being followed
   //before the animation has started, u can also use return false;
   ev.preventDefault();
   //store a reference to the anchor tag
   var $self=$(this);
   //get the image and animate assuming the image is a direct child of the anchor, if not use .find
   $self.children('img').animate( {height:"10px"}, function(){
       //now get the anchor href and redirect the browser
       document.location = $self.attr('href');
   });
 });
于 2008-12-09T06:55:08.977 に答える
1

ここにリストされているアニメーション関数を使用できるはずです: (jquery doc)

アニメーションが完了するまでコールバックを実行してはならないということです。

callback (オプション) Function
アニメーションが完了するたびに実行される関数で、アニメーション対象の要素ごとに 1 回実行されます。

于 2008-12-08T23:12:58.160 に答える
1

誰かがこのバリエーションに興味がある場合に備えて...

リンク自体をアニメーション化された画像とは別にしたかったので、コードを少しいじりましたが、今ではそれが機能しています。

JavaScript/jquery:

print(" $(function()
    {
        $('#myLink').click( function(ev){
            //prevent the default action of the event, this will stop the href in the anchor being followed
            //before the animation has started, u can also use return false;
            ev.preventDefault();
            //store a referene to the anchor tag
            var $self=$('img#myImage');
            var $link=$('a#myLink');
            //get the image and animate
            ($self).animate( {height:"10px"}, function(){
                //now get the anchor href and redirect the browser
                document.location = $link.attr('href');
            });
        });
    });
");

マークアップ:

print("<body>
<a id="myLink" href="http://www.google.co.uk">LINK</a>

<img id="myImage" src="http://www.derekallard.com/img/post_resources/jquery_ui_cap.png"/>
</body>");

そうは言っても、私はおそらくコードを醜くしました。申し訳ありません。

于 2008-12-09T18:36:21.527 に答える
1

関数を記述する必要はありません。組み込みの jQuery イベント メソッド event.preventDefault() を使用するだけです (この質問が投稿された時点では、これはおそらく利用できませんでした)。

http://api.jquery.com/event.preventDefault/

于 2010-01-27T16:01:10.947 に答える
0

あなたがおそらくこれを聞きたくないことはわかっていますが、あなたがしていることは、ユーザビリティの観点からは大したことではありません。

クールな効果を作成したいのですが、そうするとユーザー エクスペリエンスが遅くなります。今日、Web 訪問者は非常に忙しく、リンクをクリックするときはできるだけ早くアクセスしたいと考えています。その過程で訪問者の割合を失い、ほんの少しの視覚的なキャンディーのためだけに他の多くの人を悪化させます.

于 2008-12-09T08:51:15.793 に答える
0

これを試して：

 $("#thelink").click( function(){
  $(this).animate( { animation stuff }, "medium", "easeboth", function(){
    document.location = $(this).attr('href');  
  });
 });

または、リンクがアニメーションではなく画像の場合（質問の状態）：

 $("#thelink").click( function(){
  $("#theImg").animate( { animation stuff }, "medium", "easeboth", function(){
    document.location = $("thelink").attr('href');  
  });
 });
于 2008-12-08T23:13:09.907 に答える
0

コールバック関数で false を返すだけです。

于 2011-12-21T13:59:03.333 に答える
0

すべてのウェブサイトが同じというわけではありません。ポートフォリオ サイトでは、Google 検索のようなツールでは、検索バーを使用する前にロゴが毎回アニメーション化されると、アニメーションがほとんどなく、インターフェイスが「クール」であってもまったく問題ありません。

于 2012-07-23T22:03:07.747 に答える