CODEWITHSUNDEEP
jquery
Alex
Alex

Reputation: 61

jQuery not working for fadeOut

I got this code for testing purpose, it's very simple , when I open it in Firefox for debugging, it's not working, everything appears to be loaded and fine, it's very weird, any thoughts on this? . many thanks

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hover Over effect jQuery</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javscript" src="js/jquery-1.10.2.min.js">
      jQuery(document).ready(function($) {
        $("img").click(function(event) {
          $(this).fadeOut('slow');
        });
      });
    </script>
  </head>
  <body>
    <div class="viewport">
      <a href="#">
        <img src="images/renew.jpg">
      </a>

      <div class="caption"><span>Caption goes here</span>
      </div>
    </div>
  </body>
</html>

Upvotes: 3

Views: 27820

Answers (3)

Andrey Zhilyakov
Andrey Zhilyakov

Reputation: 797

You are probably using a slim build get the production version. here

You can also use the slim build, which excludes the ajax and effects modules:

Download the compressed, production jQuery 3.3.1 slim build

Download the uncompressed, development jQuery 3.3.1 slim build

Upvotes: 0

Tim Seguine
Tim Seguine

Reputation: 2914

Change this:

<script type="text/javscript" src="js/jquery-1.10.2.min.js">

        jQuery(document).ready(function($) {
            $("img").click(function(event) {
                $(this).fadeOut('slow');
            });
        });

      </script>

To this:

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

        jQuery(document).ready(function($) {
            $("img").click(function(event) {
                $(this).fadeOut('slow');
            });
        });

      </script>

When you load an external script using the src attribute, the browser will ignore the contents of the <script> tag if the request is successful. The solution is easy, just add another script tag.

You should also remove the <html> that is before your <!DOCTYPE html>. It is pointless and wrong. Also, if this is the entire document, you need a </html> at the very end.

Upvotes: 10

Mark
Mark

Reputation: 87

There are two problems with why the code isn't working.

  1. When you try to load an external script using the src attribute it will ignore the contents of the script tag. Just include <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> instead :).
  2. You misspelt JavaScript when you created the script element. Amend the spelling mistake and it will fix the code after you've correctly included the jQuery library.

A couple more helpful tips:

  • Make sure your html tags are in the correct place. In your code, you've declared the html tag twice. Make sure you have a <html> at the top and a closing tag </html> at the end.

  • The <!DOCTYPE> declaration is situated at the very top of the document.

Example using your code:

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Hover Over effect jQuery</title>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript">

            jQuery(document).ready(function($) {
                $("img").click(function(event) {
                    $(this).fadeOut('slow');
                });
            });

          </script>


</head>
<body>
    <div class="viewport"><a href="#">
    <img src="robin.gif" ></a>

    <div class="caption"><span>Caption goes here</span></div></div>
</body> 
</html>

I hope this helps!

Upvotes: 1

Related Questions