jquery onclick fadein effect

Question

I am just starting to learn jquery with very little JS knowledge (long story short - I'm told it helps provide shortcuts - if I had time I would learn JS properly).

With that out of the way, I am trying to essentially create a scrolling marquee or multi-frame hero banner, whatever you want to call it. I don't want any automation, I am looking specifically for the end user to click a button/image to change the marquee image.

I am having issues with my jquery as is AND I'd like to ask for assistance on another piece I am struggling with, which is hiding the image that is currently showing.

1. what is wrong with my current jquery that it will not work appropriately?
   a. file is loaded at top of the page
   b. when I execute this ($("#imgd2").fadeIn;) part of the jquery it works in firebug, but within the click function it does not...

2. how could I go about looking to see what image is currently showing, hide that and fade in the appropriate image. For example, img1 is displayed by default, if i click on img3, how can I hide image 1 before fading in marquee 3?

//html - forgive the laziness
//I am showing the first image by default and hiding the other two images on the page.

<div style="width: 100%; height: 450px;" id="img-container">

<div id="imgd1" style="width: 432px; height: 398px; position: absolute; background-image: url(img1.jpg); background-size: cover;"></div>
<div id="imgd2" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(img2.jpg); background-size: cover;"></div>
<div id="imgd3" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(img3.jpg); background-size: cover;"></div>

<div style="position: absolute; top: 438px; left: 322px;" id="bttns">
<img id="img1" src="active.png">
<img id="img2" src="active.png">
<img id="img3" src="active.png"> 
</div>

</div>

//jquery
//On click of a particular button, I want to fadein the appropriate image

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

$("#img2").click(function () {
$("#imgd2").fadeIn;
});

$("#img3").click(function () {
$("#imgd3").fadeIn;
});

thanks in advance!

Answer 1

it must have a parenthesis :-)

$("#imgd5").fadeIn();

for question #2..heres my fiddle http://jsfiddle.net/5PP4z/2/

Answer 2

fadeIn is a function, you need to invoke it

$("#imgd3").fadeIn();

Instead of writing a click handler for each of the imgd elements, you can target all of them(by adding a class imgd) and use a data-* attribute to specify the image(data-target attribute with the id of the image) to be displayed. Also add a class img to all the images so that we can hide it easily.

<div style="width: 100%; height: 450px;" id="img-container">
    <div id="imgd1" class="imgd" style="width: 432px; height: 398px; position: absolute; background-image: url(//placehold.it/432x398/ff0000); background-size: cover;"></div>
    <div id="imgd2" class="imgd" data-target="#img2" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(//placehold.it/432x398/00ff00); background-size: cover;"></div>
    <div id="imgd3" class="imgd" data-target="#img3" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(//placehold.it/432x398/0000ff); background-size: cover;"></div>
    <div style="position: absolute; top: 438px; left: 322px;" id="bttns">
        <img id="img1" class="img" data-target="#imgd1" src="//placehold.it/32/ff0000" />
        <img id="img2" class="img" data-target="#imgd2" src="//placehold.it/32/00ff00" />
        <img id="img3" class="img" data-target="#imgd3" src="//placehold.it/32/0000ff" />
    </div>
</div>

then

jQuery(function ($) {
    var $imgds = $('.imgd');
    $('.img').click(function () {
        var $target = $($(this).data('target'));
        $imgds.not($target).hide();
        $target.stop(true, true).fadeIn();
    })
});

Demo: Fiddle