CODEWITHSUNDEEP
jquery
Sackling
Sackling

Reputation: 1820

hover opacity and click opacity

I have some image links that change opacity on rollover with jquery. I want to also change the opacity of the "inactive" images when they are clicked and remove the active class of the previous image. Perhaps some code to demonstrate:

html:

<div style="width:940px; text-align:center; padding-bottom:10px;">
    <a href="#" class="nobase" onClick='jQuery("#youtube-player-container").tubeplayer("play", "adI8ZRzjnlE");'>
        <img class="active"  src="images/video_thumbs/003.jpg" width="300" height="167" alt="La Vie en Couleur">
    </a>
    <a href="#" class="nobase" onClick='jQuery("#youtube-player-container").tubeplayer("play", "5L1vrwEvP-c");'>
        <img class="inactive" src="images/video_thumbs/001.jpg" width="300" height="167" alt="A Holiday Video">
    </a>
    <a href="#" class="nobase" onClick='jQuery("#youtube-player-container").tubeplayer("play", "ijfgzId6jdI");'>
        <img class="inactive"   src="images/video_thumbs/002.jpg" width="300" height="167" alt="La Vie en Couleur">
    </a>
</div>

Jquery

<script type="text/javascript">
    $(document).ready(function() {
        $("img.inactive").hover(function() {
            $(this).stop().animate({
                "opacity": "1"
            }, "slow");
        }, function() {
            $(this).stop().animate({
                "opacity": "0.6"
            }, "slow");
        });
    });
</script>

css:

.inactive {opacity:0.6;}
.active {opacity:1.0;}

so basically it is doing what I want on rollover, but I want to switch the active class on click as well.

Upvotes: 0

Views: 1525

Answers (2)

Bengineer
Bengineer

Reputation: 7742

for what I understood, you want to change the class. you can use in both hover functions:

element.toggleClass('className')

or, you can explicitly remove or include the class that you want:

element.removeClass('className')
element.addClass('className')

I hope that's what you want. =]

Upvotes: 0

samccone
samccone

Reputation: 10926

I think you can do most of it in plain ol CSS

selector:hover{}

selector:active{}

or you can do this

$('elm').bind({'click':action,'hover':action});

function action(e){
 $(e.currentTarget).doSomething();
}

Upvotes: 2

Related Questions