CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sikander
Sikander

Reputation: 2835

Jquery : fadein function not working

i am following jquery video tutorial for image slider. This is what i've in html 

   <div id="slider">
     <img id="1" src="images/1.jpg" alt="" > 
     <img id="2" src="images/2.jpg" alt="" /> 
     <img id="3" src="images/3.jpg" alt=""/>
     <img id="4" src="images/4.jpg" alt=""/>
   </div>

css for images 

#slider >img{
    width: 960px;
    height: 300px;
    display: none;
    float: left;
 }

i want to fadein first image when page loads like this 

$(function(){
      $("#slider>img>#1").fadeIn(3000);
  });

but this does not work. i did inspect jquery files is also included perfectly in my sources. can someone help me with it please

Upvotes: 1

Views: 70

Answers (3)

kiranvj
kiranvj

Reputation: 34117

Try

<div id="slider">
     <img id="img1" src="images/1.jpg" alt="" > 
     <img id="img2" src="images/2.jpg" alt="" /> 
     <img id="img3" src="images/3.jpg" alt=""/>
     <img id="img4" src="images/4.jpg" alt=""/>
   </div>

$(function(){
      $("#img1").fadeIn(3000);
  });

Upvotes: 0

dfsq
dfsq

Reputation: 193261

Images tags <img> cannot have children, so > selector makes no sense. Correct code would be:

$("#slider>img#1").fadeIn(3000);

Another thing. Even though numeric ids are valid HTML5 identifiers, it's better to stick to more traditional ones, like image-1 for example for legacy browsers:

<img id="image-1" src="images/1.jpg" alt="" >

Upvotes: 6

Krasimir Stoyanov
Krasimir Stoyanov

Reputation: 19

you have to use $(document).ready(function () {...}); This means that when the page is loaded, the function will be active. You should place your code in this function.

$(document).ready(function(){
  $("#slider>img>#1").fadeIn(3000);
});

Upvotes: -2

Related Questions