js jQuery 事件绑定有关问题 _JavaScript

js jQuery 事件绑定问题

本帖最后由 sugang_ximi 于 2012-12-26 11:55:19 编辑

如图的一个表格列表，当鼠标移动到每行时都绑定了一个事件（显示每行下面的内容）。

$(".s-fqa-item").mouseenter(function(){

		$(this).children('div[class=s-fqa-detail]').slideDown('slow');

	}).mouseleave(function(){

		$(this).children('div[class=s-fqa-detail]').slideUp('slow');

	});

当你很快的上下移动鼠标时，最后每个绑定的事件都执行了，就会同时显示多条内容。现在我想要的效果是：不管上下怎样鼠标移动，只在鼠标最后停留的那行才触发事件？？？？？？？

------解决方案--------------------

引用:

本帖最后由 sugang_ximi 于 2012-12-26 11:55:19 编辑

如图的一个表格列表，当鼠标移动到每行时都绑定了一个事件（显示每行下面的内容）。
JavaScript code?12345$(".s-fqa-item").mouseenter(function(){ $(this).children(……

用hover再加上2秒的延时，并清除前一个的延时

$(".s-fqa-item").hover(function() {

    clearTimeout($(this).data('timeout'));

     $(this).children('div[class=s-fqa-detail]').slideDown('slow');

}, function() {

    var t = setTimeout(function() {

        $(this).children('div[class=s-fqa-detail]').slideUp('slow');

    }, 2000);

    $(this).data('timeout', t);

});

------解决方案--------------------
$(".s-fqa-item").mouseenter(function(){
        $('div[class=s-fqa-detail]').slideUp('slow');
        $(this).children('div[class=s-fqa-detail]').slideDown('slow');
    }).mouseleave(function(){
        $(this).children('div[class=s-fqa-detail]').slideUp('slow');
    });
------解决方案--------------------



var clock;

$(".s-fqa-item").mouseenter(function(){

		var _this = $(this);

        clearTimeout(clock);

		clock = setTimeout(function(){

			_this.children('div[class=s-fqa-detail]').slideDown('slow');

		},500);

}).mouseleave(function(){

	$(this).children('div[class=s-fqa-detail]').slideUp('slow');

});