change image opacity onclick menu items

Question

I'm trying to change image opacity when I click on items menu; For example, if I click on the item Newsletter on my menu or on the arrow navigation, I would like that my image past to the opacity 0 to 100. In my css, I declare my image opacity to 0 an in my jquery code I did:

$("#newsletter").click(function () {
    $('#img1').fadeTo(3000,1);
});

But nothing happens. I'm totally lost. Do you have any ideas how to do that? Here my fiddle :http://jsfiddle.net/jarod51/4RvWY/

Answer 1

@skeryl had the right answer to the immediate problem (no id) but why tie this up with jQuery animation when CSS can do it? When you're finished with the scrolling animation, add a class to the active panel. Then use css and css transitions to animate the opacity of images within panels of that class.

Within your animation function:

    $('#wrap').find('.shown').removeClass('shown');
    $target.addClass('shown');

And in your CSS:

.panel img {
    opacity:0;
    -moz-transition: opacity 3000ms ease-in-out;
    -webkit-transition: opacity 3000ms ease-in-out;
    transition: opacity 3000ms ease-in-out;
}

.shown img {
    opacity: 1;
}

Additionally, skipping the ID will stop you from chasing your tail as you add more images to the slider/nav.

Here's an updated Fiddle.

Answer 2

Your anchor tag doesn't actually have an id of "newsletter":

You need to change add the id attribute:

<li><a id="newsletter-button" href="#newsletter">Newsletter</a></li>

$("#newsletter-button").click(function () {
            $('#img1').fadeTo(3000,1);
    });

i've changed the id for the button so that it doesn't conflict with the panel.

working example here

unless you meant for the click event to be wired up to the actual panel?

Answer 3

is it possible for the actual panel ? because I need to have everytime this effect when for example newsletter is active.