有jQuery悬停功能的问题

Question

JS

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

HTML标记

<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>

我想做的是，

1. 淡入淡出事件，图像为.remove（表示 内部悬停.row div ）并淡出模糊事件。
2. 点击.remove点击，获取父div的节点属性

的jsfiddle

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

我错过了什么吗？

Answer 1

  

  
1. 淡入淡出事件时，图像带有.remove（位于徘徊的.row div内），淡出模糊事件。
  

这将在悬停行中切换“删除”类。

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

您还应该使用stop(true, true)来清除动画队列并结束任何正在进行的动画。

  

  
1. 开.remove click，获取父div的节点属性
  

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

查看 demo 。

Answer 2

检查语法：

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

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

<强>编辑： BLUR事件不适用于DIV，所以你可以尝试使用mouseout，比如

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

Answer 3

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

尝试这个。

Answer 4

这是CSS的工作，而不是jQuery。我会用这个简单的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;
}​

演示http://jsfiddle.net/KPQ5h/

如果你还想要javascript：

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

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