CODEWITHSUNDEEP
jqueryhtmlcsshoverfadeto
user2660811
user2660811

Reputation: 243

jQuery - reduce opacity of image on mouseover

What I want to achieve is that when you hover your mouse over an image its opacity will reduce to the half. I must be doing an obvious mistake here but can't figure out what exactly. Any tip would be appreciated.

http://jsfiddle.net/bUHVc/1/

   <a href="#" id="right-button"><img class="arrow" src="http://placekitten.com/200/200" alt="right" /></a>

 $('.arrow').hover(
function() {
     $(this).find('img').fadeTo('slow', 0.5);
},
function() {
     $(this).find('img').fadeTo('slow', 1);
 }
);

Upvotes: 1

Views: 10156

Answers (3)

Jason C
Jason C

Reputation: 11

I have updated your jsfiddle - http://jsfiddle.net/bUHVc/6/

You were missing the include for jquery. Also, you did not need the find("img") line in your code. You can easily accomplish what you are looking for using the animate() function.

The jQuery

$(".arrow").hover(function(){
   $(this).stop().animate({"opacity": "1"}); 
}, function(){
   $(this).stop().animate({"opacity": "0.5"});
});

The CSS:

.arrow{
   opacity: 0.5;
}

The HTML:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a href="#" id="right-button"><img class="arrow" src="http://placekitten.com/200/200" alt="right" /></a>

Upvotes: 0

pna
pna

Reputation: 5761

A nicer solution would be to do it in simple CSS, without adding any javascript, so you can just add a class and do it with all your images, something like:

.arrow:hover {
  opacity: 0.5;
}

and if you want the slow transition you can just look at here to customize the effect.

Upvotes: 8

SeeMeCode
SeeMeCode

Reputation: 1435

You need to include jQuery. Also, either remove the .find() and move your classname to the img element, or use .children() instead.

Updated fiddle: http://jsfiddle.net/bUHVc/3/

Upvotes: 0

Related Questions