Why won't the image fade in with jQuery

Question

I'm new to jQuery and I am trying to get a image to fade in but it won't. Can someone tell me what is wrong with the code? Thanks in advance

my Html page looks like this

<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<meta charset="utf-8">
<link rel="stylesheet"  type="text/css" href="main.css">
<script type="text/javascript">
    $(document).ready(function(){
        $(".slider#1").fadeIn("slow");

});
</script>
<title>slider</title>
</head>
<body>
    <div class="slider" >
        <img id="1" src="images/mountain.jpg" alt="Mountain"/>
        <img id="2" src="images/roses.jpg" alt="Roses" />
        <img id="3" src="images/vilage.jpg" alt="Village"/>

    </div>

</body>
</html>

and my css code

* {margin: 0 padding:0}

.slider {
    background-image: url(images/loader.gif);
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid black;
    overflow: hidden;
    width: 700px;
    height: 400px;


}

.slider img {
    display: none;
    width: 700px;
    height: 400px;
}

using numbers for elements - id="1" - not good idea. try to avoid this. — Igor Benikov, Jan 12 '14 at 21:14
As @IgorBenikov says: http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — jammykam, Jan 12 '14 at 21:19
I've rolled back the question to its original version; edit 2 wiped out a lot of information (I think in an attempt to clarify). — anton.burger, Jan 13 '14 at 09:38

score 2 · Answer 1 · answered Jan 12 '14 at 21:11

2

This piece of code targets the element with the class slider and the ID 1:

$(".slider#1").fadeIn("slow");

As your image element is a child of the element with slider class, you need to do this to target element with ID 1 which has a parent with class slider:

$(".slider #1").fadeIn("slow");

answered Jan 12 '14 at 21:11

scrowler

23,403
9
52
87

@user3188287 do you mean you're getting the broken link? Check your images exist, and check your console for any errors from jQuery – scrowler Jan 12 '14 at 22:33

erikrunia · Answer 2 · 2014-01-12T22:39:52.263

Your jQuery selector is incorrect. Try this:

$(".slider #1").fadeIn("slow");

In addition, your concept my be flawed. Always best to be sure it is going to display the way you want before the fancy jQuery calls are added. Try commenting out the fadeIn call for now and adding this css class temporarily to be sure the page looks how you want when the image is visible from the start:

.slider #1 {
    display: block;
    width: 700px;
    height: 400px;
}

score 0 · Answer 3 · answered Jan 12 '14 at 22:49

0

This seems to work just fine -- I made a simplified fiddle: http://jsfiddle.net/grahampcharles/TAjPR/ .

<div class="slider" > <img id="2" src="http://15pictures.com/wp-content/gallery/15-pictures-roses/roses-2.jpg" alt="Roses" /> </div>

Why don't you put your code into a fiddle, too -- chances are this is a jquery selector issue, and seeing the code actually work will make it easier to troubleshoot.

answered Jan 12 '14 at 22:49

Graham Charles

8,294
3
23
38

If jquery isn't being loaded, you'll see lots of errors in the console -- are you? Or maybe 404s on the image files? – Graham Charles Jan 12 '14 at 23:17
You should post that as an answer. Leaving off the protocol is done so you won't get security warnings about mixed secure and insecure content -- if your page loads over https, so will the CDN content. But the slashes are necessary for most browsers, I think. Are you viewing your web page locally, without a local web server? (Then the protocol could be file:// and the CDN content might not get loaded at all.) See also: http://stackoverflow.com/questions/4659345/is-there-any-downside-for-using-a-leading-double-slash-to-inherit-the-protocol-i – Graham Charles Jan 13 '14 at 02:09

Why won't the image fade in with jQuery

3 Answers3