Forums

sepp88

Howdy,

i'm currently developing a wordpress theme for my own blog. It's based on three columns (<ul class="latest">. When the page is loaded, all three columns are kinda blurred out (opacity:0.3). If you mouseover a col it's getting 100% in its opacity. Everything works fine. You can see the result here:here

The only thing i want to achieve is, if i mouseout of a col towards the body this col shouldn't blur out. So i rollover the cols, the col i'm currently over should get a 100%. However if i rollout of this col towards the rest of the screen it should keep the 100% opacity. So ONE col should always stay at a 100%.

I've no idea how i can achieve this? Please help me guys. Thank you.

JaredAM

That's kind of cool. You could probably make the opacity sticky by not using a mouseout but just mouseover (but hover works better).


$(document).ready(function(){
  $(\"ul.latest\").css({opacity: 0.3});
  $(\"ul.latest\").hover(function(){
    $(\"ul.latest\").animate({opacity:0.3},200); 
    $(this).stop().animate({opacity:1},300);
  });
});

sepp88

Thank you! awesome.

treehouse : what would you like to learn today?

Forums

jquery: opacity of columns? need help.