2

私は正常に動作するドロップダウンメニューを持っていますが、アニメーション、スライドアップ、ダウンなどのjqueryエフェクトを追加したいです。

現在、ulを表示するためにvisiblity hiddenとvisibleを使用しています。他の効果を使用するにはどうすればよいですか。以下のコードは次のとおりです。

 <script type="text/javascript">
     $(document).ready(function () {
         $('.ul-links > li').bind('mouseover', openSubMenu);
         $('.ul-links > li').bind('mouseout', closeSubMenu);

         function openSubMenu() {
             $(this).find('ul').css('visibility', 'visible');
         };

         function closeSubMenu() {
             $(this).find('ul').css('visibility', 'hidden');
         };     });
  </script>

私は使用してみました :$('ul', this).slideDown(100); $('ul', this).slideUp(100);成功しません css:

.quiklinks .ul-links li ul
 {
position:absolute;
visibility: hidden;

margin: 0px;
padding-top:0px;
z-index: 1000;
top: 42px;
left:0px;
 }

どんな助けでも大歓迎です

4

2 に答える 2

2

.animate()関数ではなく関数を使用できます.css()。

 $(document).ready(function () {
     $('.ul-links > li').bind('mouseover', openSubMenu);
     $('.ul-links > li').bind('mouseout', closeSubMenu);

     function openSubMenu() {
         $(this).find('ul').animate({opacity : 1}, 500);
     };

     function closeSubMenu() {
         $(this).find('ul').animate({opacity : 0}, 500);
     };
 });

ドキュメントは.animate()ここにあります: http://api.jquery.com/animate/

あらかじめ作成されたアニメーションもいくつかあります。

$(this).find('ul').slideToggle(500);//http://api.jquery.com/slidetoggle/

$(this).find('ul').fadeToggle(500);//http://api.jquery.com/fadetoggle/

.slideToggle()これは、およびを使用するための jsfiddle です.fadeToggle(): http://jsfiddle.net/jasper/wFrpe/

于 2011-11-15T17:41:17.980 に答える
1

.slideToggle()またはを使用できます.fadeToggle()。これらの関数のいくつかを組み合わせて高度な効果を実現したり、jQuery アニメーション プラグインを使用して追加の効果を得ることができます。

また、使用してイベントバインディングを簡素化しました.hover()

 <script type="text/javascript">
     $(document).ready(function () {
         $('.ul-links > li').hover(toggleMenu, toggleMenu);

         function toggleMenu() {
             $(this).find('ul').stop(true, true).slideToggle();
         } 
     });
 </script>

visibility:hidden;スタイルシートでも使用していることに気付きました。jQuery が表示スタイルを使用して要素を表示できるかどうかを変更する方法と競合するため、これを削除する必要があります。

代わりに hide() を呼び出すことでそれを行うことができます:

 $('.ul-links > li').hide().hover(toggleMenu, toggleMenu);

ボーナスヒント:

アニメーションを使用するときは、常に.stop(true, true)それらの前にインクルードしてください。そうしないと、前のアニメーションが完了する前にユーザーが何度もアニメーションを操作すると、癖が発生します。

于 2011-11-15T17:41:36.573 に答える