jQuery hide()或fadeOut()不起作用

时间:2015-01-12 22:26:12

标签: javascript jquery

我使用模板构建网站,我认为有些东西干扰了.hide()或.fadeIn()。当我点击此处的图片时。

<div id="menuCover"> <a href="javascript:void(0);"> <img src="SleepingMoonImages/sleepingmoonmenulogo.png" alt=""/> </a> </div>

没有任何反应。它不会消失或做任何事情。我也知道正在检测menu.js,因为我可以使用document.write()并且它可以工作,并且console.log也适用于F12开发人员工具

Menu.js

$('#menuCover').click(function () {

$('#menuCover').fadeOut();

});

我试图点击的图片位于

<div id="page2" class="content">
            <div class="container_12">
                <div class="grid_12">

的index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Home</title>
        <link rel="icon" href="images/favicon.ico">
        <link rel="shortcut icon" href="images/favicon.ico" />
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/camera.css">
        <link rel="stylesheet" href="css/form.css">
        <script src="js/jquery.js"></script>
        <script src="js/jquery-migrate-1.1.1.js"></script>
        <script src="js/superfish.js"></script>
        <script src="js/forms.js"></script>
        <script src="js/jquery.ui.totop.js"></script>
        <script src="js/jquery.equalheights.js"></script>
        <script src="js/jquery.easing.1.3.js"></script>
        <script src="js/jquery.ui.totop.js"></script>
            <script type="text/javascript" src="js/menu.js"></script>

        <script src="js/tms-0.4.1.js"></script>
        <script type="text/javascript" src="/js/jssor.slider.mini.js"></script>
        <script>
            $(document).ready(function(){
                $('.slider_wrapper')._TMS({
                    show:0,
                    pauseOnHover:false,
                    prevBu:'.prev',
                    nextBu:'.next',
                    playBu:false,
                    duration:800,
                    preset:'fade',
                    pagination:true,//'.pagination',true,'<ul></ul>'
                    pagNums:false,
                    slideshow:8000,
                    numStatus:false,
                    banners: 'fade',
                    waitBannerAnimation:false,
                    progressBar:false
                });
            });
            $(document).ready(function(){
                !function(){
            var map=[]
             ,names=[]
             ,win=$(window)
             ,header=$('header')
             ,currClass
            $('.content').each(function(n){
             map[n]=this.offsetTop
             names[n]=$(this).attr('id')
            })
            win
             .on('scroll',function(){
                var i=0
                while(map[i++]<=win.scrollTop());
                if(currClass!==names[i-2])
                currClass=names[i-2]
                header.removeAttr("class").addClass(names[i-2])
             })
            }(); });
                    function goToByScroll(id){
                $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
                }
                $(document).ready(function(){
                    $().UItoTop({ easingType: 'easeOutQuart' });
                });
        </script>
        <!--[if lt IE 8]>
            <div style=' clear: both; text-align:center; position: relative;'>
                <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
                    <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
                </a>
            </div>
        <![endif]-->
        <!--[if lt IE 9]>
            <script src="js/html5shiv.js"></script>
            <link rel="stylesheet" media="screen" href="css/ie.css">
        <![endif]-->
    </head>
    <body class="">
<!--==============================header=================================-->
        <header class="page1">
            <div class="container_12">
                <div class="grid_12">
                <div id="logoImage1"><a href="#" onClick="goToByScroll('page1'); return false;"><img src="SleepingMoonImages/sleepingmoonwhite.png" alt=""/></a></div>
               <div id="logoImage"><a href="#" onClick="goToByScroll('page1'); return false;"><img src="images/logo.png" alt=""/></a> </div>
                    <!--<h1><a href="#" onClick="goToByScroll('page1'); return false;"><img src="images/logo.png" alt="Gerald Harris attorney at law" height="50" width="1600"/></a></h1>-->
                    <div class="menu_block">
                        <nav class="">
                            <ul class="sf-menu">
                                <li class="current men"><a onClick="goToByScroll('page1'); return false;" href="#">Home </a> <strong class="hover"></strong></li>
                                <li class="men1"><a onClick="goToByScroll('page2'); return false;" href="#">Menu</a><strong class="hover"></strong></li>
                                <li class=" men2"><a onClick="goToByScroll('page3'); return false;" href="#">Events</a> <strong class="hover"></strong></li>
                                <li class=" men3"><a onClick="goToByScroll('page4'); return false;" href="#">Hours & Location</a> <strong class="hover"></strong></li>
                                <!--<li class=" men4"><a onClick="goToByScroll('page5'); return false;" href="#">Contact Us</a> <strong class="hover"></strong></li>-->
                            </ul>
                        </nav>
                        <div class="clear"></div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </header>
<!--=======content================================-->
        <div id="page1" class="content">
            <div class="ic">More Website Templates @ TemplateMonster.com - September 9, 2013!</div>
            <div class="container_12">
                <div class="grid_12">
                <div style="min-height: 50px;">
    <!-- Jssor Slider Begin -->
    <div id="slider1_container" style="display: none; position: relative; margin: 0 auto; width: 980px; height: 380px; overflow: hidden;">
        ...
    </div>
    <!-- Jssor Slider End -->
</div>

                <div class="slider_wrapper">
                        <ul class="items">
                            <li>
                                <img src="images/spacer.gif" alt="">
                                <div class="caption banner">
                                    <h2>Let Us Show You the Way to Success</h2>
                                </div>
                            </li>
                            <li>
                                <img src="images/spacer.gif" alt="">
                                <div class="caption banner">
                                    <h2>Interminable Energy for Your Project</h2>
                                </div>
                            </li>
                            <li>
                                <img src="images/spacer.gif" alt="">
                                <div class="caption banner">
                                    <h2>We know how to solve your problems!</h2>
                                </div>
                            </li>
                            <li>
                                <img src="images/spacer.gif" alt="">
                                <div class="caption banner">
                                    <h2>Make your business a booming one!</h2>
                                </div>
                            </li>

                        </ul>
                    </div>

                </div>
            </div>
        </div>
        <div id="page2" class="content">
            <div class="container_12">
                <div class="grid_12">
                    <div class="slogan">
                        <h3>Our Menu</h3>

                  </div>
                </div>
                </div>
                <div id="menuCover">
            <a href="javascript:void(0);">  <img src="SleepingMoonImages/sleepingmoonmenulogo.png" alt=""/> </a>
            </div>
        </div>
        <div id="page3" class="content">
            <div class="container_12">
                <div class="grid_12">
                    <div class="slogan">
                        <h3>Upcoming Events</h3>
                        <div class="text1">
                            Events Information Text TBA
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div id="page4" class="content">
            <div class="container_12">
                <div class="grid_12">
                    <h3>Hours & Location</h3>
                </div>
                <div class="companies">

                    <div class="clear"></div>

                </div>
            </div>
        </div>


<!--==============================footer=================================-->
        <footer>
            <div class="container_12">
                <div class="grid_12">
                    <div class="copy">

                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </footer>
    </body>
</html>

1 个答案:

答案 0 :(得分:1)

您需要将JS代码放在Document Ready函数中,因为它在页面加载之前正在执行。

解决方案:

http://jsfiddle.net/m2sv4t7q/

$("document").ready(function {

    $('#menuCover').click(function () {

        $('#menuCover').fadeOut();

    });

});

添加该功能可以在执行javascript之前加载页面的完整html。