JQuery Element Opacity Setting

Question

Hello,

I have a list of images which are all set to 40% opacity when the DOM is loaded.

I need the first of these images to remain at 100% opacity as the others fade down.

My code is as follows but I can't seem to get the first image to remain at 100%.

$j(document).ready(function() {

    fadeDownImages();



    fadeDownImages = function() {
      $j("ul.promo img").fadeTo(1500, 0.2);
      $j("ul.promo img").hover(function(){
      $j(this).fadeTo(300, 1.0); // This should set the opacity to 100% on hover
      },function(){
      $j(this).fadeTo(200, 0.2); // This should set the opacity back to 60% on mouseout

    });
    };

    $j("ul.promo img:first-child").fadeIn(200, 1.0);

Any help much appreciated

Answer 1

It doesn't look like you're really doing anything to try to get the first image to stay 100% opacity. Try this:

fadeDownImages = function() {
            $j("ul.promo img:gt(0)").fadeTo(1500, 0.2);
            $j("ul.promo img:gt(0)").hover(function(){
            $j(this).fadeTo(300, 1.0); // This should set the opacity to 100% on hover
            },function(){
            $j(this).fadeTo(200, 0.2); // This should set the opacity back to 60% on mouseout

});

Answer 2

$j(document).ready(function() {
    fadeDownImages = function() {
        var imgs = $j("ul.promo img:not(:first-child)");
        imgs.fadeTo(1500, 0.2);
        imgs.hover(function(){
            $j(this).fadeTo(300, 1.0);
        },function(){
            $j(this).fadeTo(200, 0.2);
        });
    };
    $j("ul.promo img:first-child").fadeIn(200, 1.0);
}

Answer 3

Hello, I took @cpharmston suggestion and changed :first-child to a selector class and it worked!!

fadeDownImages = function() {
    var imgs = $j("ul.promo img:not(.bollocks)");
    imgs.fadeTo(1500, 0.2);
    imgs.hover(function(){
        $j(this).fadeTo(300, 1.0);
    },function(){
        $j(this).fadeTo(200, 0.2);
    });
};
$j("ul.promo img:first-child").fadeIn(200, 1.0);

Thanks for your help