JQuery fadeIn and linking problem


#1

I'm having trouble getting this function in JQuery to work with my HTML Elements: I linked the JQuery to HTML using a hosted google library but I haven't actually been able to see my image fade out. Let me know if my problem is with my code or if I'm having a problem linking JQuery. THANKS!!!

HTML CODE:

   <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
   <script type="text/javascript" src="website.js"> </script>
   <link href="website.css" type="text/css" rel="stylesheet">

<div class="image">
  <img src="http://thesource.com/wp-content/uploads/2015/11/asap.jpg"/>
</div>

JQuery:

$(document).ready(function(){
 $('.image').hide();
 $('.image').fadeIn("slow");
}

CSS:

.image {
  padding: 5px 10px;
  margin: 0px auto;
  display: block;
  width: 100%;
  height: 100%;
  display: table;
  text-align: center;
}

#3

What lesson is this? Or is it your own project?

A note about resource names:

The easiest way to avoid problems down the road is to adopt lower case for all resource names.

fashionmedia.css
fashionmedia.js

Servers are case sensitive and the industry has long ago established the convention of lowercase names. You'll thank yourself, someday.


#4

This is my own project. I just want to work with JQuery to create some cool affects but it's bugging me that it won't run. Do you have any ideas for what could be wrong?


#5

For the sake of transparency, may we see your entire index.html source code, please?


#6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.