•  09-07-2023
  •  | 
  •  

문제

I'm new to html, just started doing it at school, and I'm trying to make this website just to test a few things. For some reason, it only works on JSFiddle. I am just trying to make the button glow on click. Here is the code:

<!DOCTYPE html>
<head>
<style media="screen" type="text/css">
    img {
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    div#info_box {
        height: 221px;
        width: 221px;
    }
</style>
<title>Test</title>
</head>
<body background="http://fc07.deviantart.net/fs70/f/2014/113/f/b/rain_by_matt74997-d7fn2e1.gif">
<div id="trigger">
    <img src="http://i.imgur.com/8QLgeGP.png" onmouseover="this.src='http://i.imgur.com/BmjwX9A.png'" onmouseout="this.src='http://i.imgur.com/8QLgeGP.png'" />
</div>
<div id="info_box" style="display:none">
     <img src="http://i.imgur.com/b3Holdt.png" alt="glow" height="221" width="221">
     <span class="custom info">
</span>

</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('div#trigger').click(function() {
            //Get info_box
            var info = $('div#info_box');
            //Fade the box in during 1 sec, show it for 5, and let it fade out again
            info.fadeIn(1000).delay(10).fadeOut(1000);
        });
    });
</script>

I tried using google chrome, internet explorer, looking through other answers, but I'm still not sure how to get it to work.

Google chrome says Uncaught Reference Error: $ is not defined but I'm not sure what to do with that.

If more information could help please ask which and I'll put it up.

도움이 되었습니까?

해결책

Please include Jquery to the top of the scripts as many plugin use it.

http://jquery.com/download/

다른 팁

Add this link to <head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

You need jquery reference when using $

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top