Jquery change opacity on Hover

Question

Im using bootstrap nav-pills to create a navigation box. Its has two list items. When the user clicks one, I want the other to fade out to show which is selected in a clear way to the user.

What I would also like to do is add a hover function, so that when you hover over the faded out list item, the opacity returns to full.

My Javascript is not the best, here is the code I am using to get the fades,maybe this itself could be improved.

HTML:

<ul  class="nav nav-pills">
    <li class="fadeWorker">
        <a  href="#1a" data-toggle="tab" id="worker">
            <img src="img/worker.png" alt="" />
            <span>I AM A WORKER</span>
        </a>
    </li>
    <li class="fadeAgency">
        <a href="#2a" id="agency" data-toggle="tab">
            <img src="img/agency.png" alt="" />
            <span>I AM AN AGENCY</span>
        </a>
    </li>
</ul>

JAVASCRIPT

$( "#worker" ).click(function() {
    $( ".fadeAgency" ).fadeTo( "slow" , 0.2, function() {
    });
    $( ".fadeWorker" ).fadeTo( "fast" , 1, function() {
    // Animation complete.
    });
});

$( "#agency" ).click(function() {
    $( ".fadeWorker" ).fadeTo( "slow" , 0.2, function() {
    });
    $( ".fadeAgency" ).fadeTo( "fast" , 1, function() {
        // Animation complete.
    });
});

Answer 1

you can do this with css and the pseudo class !important

http://jsfiddle.net/tkmwx3q1/

.fadeWorker:hover,
.fadeAgency:hover{
    opacity: 1 !important;
}

!important is a bad habbit. What it does is it changes any styles, or in other words it is "stronger" than inline styles.

So lets say you have your CSS rules which get overwritten by Javascript inline-style rules which you can overwrite again with !important

IF it still should be fading: http://jsfiddle.net/tkmwx3q1/2/

.fadeWorker:hover,
.fadeAgency:hover{
    opacity: 1 !important;
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

AND you didn't ask for this but here is an updated JS you might like. It does the same: have a play with it: http://jsfiddle.net/tkmwx3q1/1/

$( "ul.nav-pills li" ).click(function() {
    $( "ul.nav-pills li" ).not(this).fadeTo( "slow" , 0.2, function() {});
    $(this).fadeTo( "fast" , 1, function() {
        // Animation complete.
    });
});

Answer 2

You can use css3 animation like

 $(".fader").click(function() { $(this).removeClass('fade'); $(this).siblings().addClass('fade'); }); 

 .fader { transition: all 1s; } .fader.fade { opacity: .2; } li.fader:hover { opacity: 1 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" /> <ul class="nav nav-pills"> <li class="fader"> <a href="#1a" data-toggle="tab" id="worker"> <img src="img/worker.png" alt="" /><span>I AM A WORKER</span> </a> </li> <li class="fader"> <a href="#2a" id="agency" data-toggle="tab"> <img src="img/agency.png" alt="" /><span>I AM AN AGENCY</span> </a> </li> </ul> 

Answer 3

You can use "transition", and then put this on "cliked" "notClicked" class. And change the class with javascript.

When you click one change its class to "clicked" and pass the other one to "notClicked"

 a:hover { transition: all 800ms ease 0s; color:rgb(255,88,0); } 

 <a>my text</a>