2

私はウェブデザインに不慣れで、クラスプロジェクトのために本当に助けが必要です。http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/の次のJavascriptで使用しているスライドナビゲーションがあります。 

<!-- The JavaScript -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript">
        $(function() {
            /**
            * for each menu element, on mouseenter, 
            * we enlarge the image, and show both sdt_active span and 
            * sdt_wrap span. If the element has a sub menu (sdt_box),
            * then we slide it - if the element is the last one in the menu
            * we slide it to the left, otherwise to the right
            */
            $('#sdt_menu > li').bind('mouseenter',function(){
                var $elem = $(this);
                $elem.find('img')
                     .stop(true)
                     .animate({
                        'width':'170px',
                        'height':'170px',
                        'left':'0px'
                     },400,'easeOutBack')
                     .andSelf()
                     .find('.sdt_wrap')
                     .stop(true)
                     .animate({'top':'140px'},500,'easeOutBack')
                     .andSelf()
                     .find('.sdt_active')
                     .stop(true)
                     .animate({'height':'170px'},300,function(){
                    var $sub_menu = $elem.find('.sdt_box');
                    if($sub_menu.length){
                        var left = '170px';
                        if($elem.parent().children().length == $elem.index()+1)
                            left = '-170px';
                        $sub_menu.show().animate({'left':left},200);
                    }   
                });
            }).bind('mouseleave',function(){
                var $elem = $(this);
                var $sub_menu = $elem.find('.sdt_box');
                if($sub_menu.length)
                    $sub_menu.hide().css('left','0px');

                $elem.find('.sdt_active')
                     .stop(true)
                     .animate({'height':'0px'},300)
                     .andSelf().find('img')
                     .stop(true)
                     .animate({
                        'width':'0px',
                        'height':'0px',
                        'left':'85px'},400)
                     .andSelf()
                     .find('.sdt_wrap')
                     .stop(true)
                     .animate({'top':'25px'},500);
            });
        });
    </script>

ページにスライドショーを配置しようとすると、ナビゲーションが機能しなくなります。私はいくつかのスライドショーを試しましたが、それらすべてと何らかのタイプの競合があります。私が使用しようとしているのはhttp://www.jacklmoore.com/monteからのものです。

ご協力いただきありがとうございます。

4

1 に答える 1

0

animate と stop を一度に複数回呼び出しています。これに対処する 2 つの方法は、キュー システムを構築する ( jQuery にはキュー システムがあります) か、提供されたコールバック (関数がそのジョブを実行した後に実行される関数) を使用することです。

明確にするために、次のようなコードはすべて一度に実行されます。

a.animate1()
b.animate2() //animate2 doesn't wait for animate 1, thus, use of callbacks and/or queues.

補足として、関数を使用して、多くのカットアンドペーストを使用したコードの部分を削減できるかどうかを確認してください。プロジェクト頑張ってください！

于 2012-11-17T21:04:46.270 に答える