JQuery向下滑动菜单不起作用

时间:2013-09-06 04:55:05

标签: jquery html

我想在我的网站中启用jquery下拉菜单。这是我的代码:

HTML:

<div class="content">
    <ul id="sdt_menu" class="sdt_menu">
        <li>
            <a href="#">
                <img src="/SCS/templates/scsj/images/2.jpg" alt=""/>
                <span class="sdt_active"></span>
                <span class="sdt_wrap">
                    <span class="sdt_link">About me</span>
                    <span class="sdt_descr">Get to know me</span>
                </span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="/SCS/templates/scsj/images/1.jpg" alt=""/>
                <span class="sdt_active"></span>
                <span class="sdt_wrap">
                    <span class="sdt_link">Portfolio</span>
                    <span class="sdt_descr">My work</span>
                </span>
            </a>
            <div class="sdt_box">
                <a href="#">Websites</a>
                <a href="#">Illustrations</a>
                <a href="#">Photography</a>
            </div>
        </li>
    </ul>
</div>

JS:

<script src="/SCS/templates/scsj/jquery-1.4.3.min.js"></script>
<script src="/SCS/templates/scsj/jquery.easing.1.3.js"></script>
<script type="text/javascript">
    $(function () {
        $('#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>

我使用jquery和jquery easing 1.3 但我的菜单不起作用。其实我的问题是jquery效果!有什么问题?

0 个答案:

没有答案
相关问题