CODEWITHSUNDEEP
jquery
Martin
Martin

Reputation: 399

JQuery Element Opacity Setting

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

Upvotes: 1

Views: 1473

Answers (3)

Martin
Martin

Reputation: 399

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

Upvotes: 0

chaos
chaos

Reputation: 124267

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

});

Upvotes: 0

c_harm
c_harm

Reputation: 

$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);
}

Upvotes: 3

Related Questions