CODEWITHSUNDEEP
javascriptjquery
mikeb
mikeb

Reputation: 727

Can this jquery function be added a timer?

I have this jquery function that highlights the hovering over an image by changing the opacity of the other non hovered above images. Can it be added a timer, so that the change in the opacity takes a similar motion to fade in fade out? thank you!

   jQuery(function($) {
        $('#first img').hover(function() { // on mouseover
            $('#first img').css({'opacity':0.4}); // you can animate this as well
            $(this).css({'opacity':1});
        }, function() { // on mouseout
            $('#first img').css({'opacity':1});
        });
    });

Upvotes: 0

Views: 65

Answers (3)

bugwheels94
bugwheels94

Reputation: 31920

You can use animate

jQuery(function($) {
        $('#first img').hover(function() { // on mouseover
            $('#first img').stop().not(this).animate({'opacity':0.4},500); // select all image except the hovered and also stop all previous animations
            $(this).stop().css({'opacity':1},500);
        }, function() { // on mouseout
            $('#first img').stop().animate({'opacity':1},500);
        });
    });

DEMO

jQuery(function($) {
        $('#first img').hover(function() { // on mouseover
            $('#first img').stop().not(this).animate({'opacity':0.4},500); // you can animate this as well
            $(this).stop().animate({'opacity':1},500);
        }, function() { // on mouseout
            $('#first img').stop().animate({'opacity':1},500);
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
        <img src="http://goo.gl/osWLNm" width="100" class="firstimage" />
        <img src="http://goo.gl/umj4bX"  width="100" class="firstimage" />
        <img src="http://goo.gl/W1fumF" width="100" class="firstimage" />
        <img src="http://goo.gl/wMb04Z" width="100" class="firstimage" />
       
    </div>

Upvotes: 4

DDan
DDan

Reputation: 8276

 $('#first img').animate({'opacity':0.4}, 1000);

Upvotes: 0

connexo
connexo

Reputation: 56754

Just add

#first img { transition: opacity 0.3s ease; }

to your CSS.

Upvotes: 0

Related Questions