1

jqueryを使用すると、リンクを機能させることも、アンカーの背景をアニメーション化することもできません。どちらか一方が機能しているようです。

これはマークアップです：

   <ul class="nav">
   <li> <span id="background"> </span><span id="active"></span><a href="page1.html"     
   class="active">page 1</a> </li>
   <li> <a href="page2.html">page 2</a> </li>
   </ul>

これは、クリックアクションが発生するが、アニメーション効果は発生しないjqueryコードです。

$("ul.nav a").click(function () {
     $("span#background").fadeIn(800, function () {});
     $("#active").animate({left: "+=2410"}, 950)     
   });

「スパン」要素には、アクティブなリスト要素内に動的に配置されるcssを介した背景画像があります。したがって、アクティブなリンクは背景とアニメーション画像を取得します。「returnfalse;」を挿入すると jqueryコードの最後で、アニメーションは実行されますが、クリックアクションは強制終了されます。

これは必要最低限​​のテストページです：テストページ へのリンク

助けてくれる人に感謝します！

4

1 に答える 1

1

上記のスニペットとテストページを確認しましたが、問題は、アンカーがhrefとアニメーションを同時に表示できるようにするシングルクリックが必要なことです。

より良い解決策があります。.hover()これは、jQueryメソッドを介したマウスオーバー中にアニメーションが発生するようにするためです。こちらを参照

.hover （）を使用したテストページの例は次のとおりです：jsFiddle

私はアニメーションを少し自由に変更しましたが、フロー/コンセプトを理解するために私が入力した多くのコメントと一緒にアイデアを得る必要があります。

この.hover()方法が受け入れられない場合でも、すべてに1回のオンクリックを使用することは可能ですが、マウスオーバー中にアニメーションは発生しません。このjsFiddleは.click()代わりに使用します。

.hover()その後、アニメーションに使用されるため、クリックanchor tagしたときに静止画を正常に機能させることができます。

于 2012-06-15T11:34:18.273 に答える