jqueryhtmlcssopacityfadeto

change image opacity onclick menu items

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/

Solution

  • @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.