CODEWITHSUNDEEP
javascriptjqueryfunctionclickhover
Tural Ali
Tural Ali

Reputation: 23240

Having issue with jQuery hover function

JS

$(".row").live("hover",
    function()
    {
        $(".remove").fadeIn();
    }
    );
$(".row").live("blur",
    function()
    {
        $(".remove").fadeOut();
    }
    );

HTML Markup

<div class="row chapter" node="1">
  <img class="remove" src="design/images/remove.png">
  Sample
</div>
<div class="row chapter" node="2">
  <img class="remove" src="design/images/remove.png">
  Sample 2
</div>

What I want to do is,

  1. to fade in on hover event, image with class .remove (which stands inside hovered .row div) and fade out on blur event.
  2. On .remove click, get parent div's node attribute

JsFiddle

http://jsfiddle.net/tt13/3VG5P/3/

Am I missing something?

Upvotes: 0

Views: 414

Answers (4)

Stefan
Stefan

Reputation: 5672

  1. To fade in on hover event, image with class .remove (which stands inside hovered .row div) and fade out on blur event.

This will toggle the class "remove" within the hovered row.

$('.row').hover(function() {
  $(this).find('.remove').stop(true, true).fadeIn();
}, function(){
  $(this).find('.remove').stop(true, true).fadeOut();
});

You should also use stop(true, true) to clear the animation queue and end any ongoing animation.

  1. On .remove click, get parent div's node attribute
$('.remove').click(function() {
    var $parent = $(this).parent();
    var nodeValue = $parent.attr('node') || "missing-node-value";
    console.log("node =", nodeValue); // DEBUG
    $parent.slideUp();
});

View demo.

Upvotes: 2

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

Check the syntax:


(".remove").fadeIn();
//Should be
$(".remove").fadeIn();

Try:
$(this).children(".remove").fadeIn();

Edited: BLUR events dont work on DIVs so you could try using mouseout, like


$(".row").live("mouseout", function() {
   $(this).children(".remove").fadeOut();
});

Upvotes: 1

dfsq
dfsq

Reputation: 193261

This is a job for CSS, not jQuery. I would use this simple CSS:

.row .remove {
    opacity: 0;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}
.row:hover .remove {
    opacity: 1;
}​

Demo http://jsfiddle.net/KPQ5h/

If you still want javascript:

$(".row").on({
    mouseover: function() {
        $(this).find('.remove').fadeIn();
    },
    mouseout: function() {
        $(this).find('.remove').fadeOut();
    }
});​

http://jsfiddle.net/KPQ5h/1/

Upvotes: 1

littlealien
littlealien

Reputation: 429

$(".row").hover(function(){
   $(".remove", this).stop().fadeIn();
}, function(){
  $(".remove", this).stop().fadeOut();
});

try this one.

Upvotes: 1

Related Questions