CODEWITHSUNDEEP
jqueryhoveropacity
BBKing
BBKing

Reputation: 2299

change opacity on hover div using jquery

I have dynamic comment list : 

<div class="comment">
  <div class="commentact">
    Test1
  </div>
</div>
<div class="comment">
  <div class="commentact">
    Test2
  </div>
</div>
<div class="comment">
  <div class="commentact">
    Test3
  </div>
</div>​

now i need to when user hover each div class='comment' show div class='commentact' with opacity 0 .

i have this jquery function : (I set div commentact default to opacity 0.2)

$(".commentact").css('opacity','0.2');

$(document).ready(function(){

   $(".comment").hover(function() {
      $(".commentact").stop().animate({ opacity: 1 });
   }, function() {
      $(".commentact").stop().animate({ opacity: 0.2 }); 
   });

});​

Now when i hover comment div show all commentact div with opacity 0, what's problem! how to fix this? Demo

Upvotes: 3

Views: 10318

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 205977

jsFiddle demo

.commentact is a child element, so use: $(this).find(".commentact")
or $(".commentact", this)

$(function(){ // DOM ready

    $(".commentact").fadeTo(0, 0.2); // initial opacity

    $(".comment").hover(function( e ) {
       $(".commentact", this).stop().fadeTo(300, e.type=="mouseenter"? 1 : 0.2 );
    });

});

Upvotes: 11

mgraph
mgraph

Reputation: 15338

instead of $(".commentact") use $(this).find(".commentact"):

$(".commentact").css('opacity','0.2');
$(document).ready(function(){
  $(".comment").hover(
    function() {
      $(this).find(".commentact").stop().animate({ opacity: 1 });
    },
    function() {
      $(this).find(".commentact").stop().animate({ opacity: 0.2 }); 
    });
});​

Demo : http://jsfiddle.net/ZLX3L/2/

Upvotes: 3

Related Questions