2010-07-18 3 views
2

У меня возникли проблемы с этим макетом и есть ссылка, которая отображается при показе на ходу!Применение Hoverintent к JQuery Hover

Вот пример строки таблицы, которая отображает данные ...

<tr> 
<td> 
<div class="heightControl"> 
    <a href="#">data</a> 
    <div class="logRemove"><a href="#" class="sremovelink"></a></div> 
</div> 
</td> 
<td>12.14.09/12:38:00 AM</td><td>12.14.19/3:01:00 PM</td> 
<td>Data</td> 
</tr> 

И Javascript!

$("tr a").hover(
    function(){$(this).siblings(".logRemove").fadeIn(100);}, 
    function(){$(this).siblings(".logRemove").fadeOut(100);} 
); 

Как вы можете видеть это установить, как это так ссылка каждой строки «данные» показывает Div-связь, которая устанавливается, чтобы удалить эту строку. Ранее я использовал hoverIntent, но, похоже, он не работает с тем, как я пытался его использовать (см. Ниже).

function remove4Display(){ 
    $(".logRemove").fadeIn(100); 
} 
function remove4Hide(){ 
    $(".logRemove").fadeOut(100); 
} 
$("tr a").hoverIntent(remove4Display, remove4Hide); 

Но это показывает, что все строки парят сразу, а не по одному, как первый фрагмент.

Итак, после того, как большое количество бессвязных это сводится к тому, как интегрировать hoverIntent в этот фрагмент (или, возможно, еще лучше, что я, возможно, забыл), в такую ​​ситуацию?

Спасибо большое!

ответ

1

Вы все еще можете использовать this в этом контексте, например, так:

function remove4Display(){ 
    $(this).siblings(".logRemove").fadeIn(100); 
} 
function remove4Hide(){ 
    $(this).siblings(".logRemove").fadeOut(100); 
} 
$("tr a").hoverIntent(remove4Display, remove4Hide); 

Или использовать его точно так же с анонимными функциями:

$("tr a").hoverIntent(function() { 
    $(this).siblings(".logRemove").fadeIn(100); 
}, function() { 
    $(this).siblings(".logRemove").fadeOut(100); 
}); 

Это еще обработчик, и this будет по-прежнему обратитесь к тому же элементу, который вы входите в/из. В кадре просто используйте .hoverIntent() так же, как и .hover(). Чтобы избежать анимации очереди, хотя, я рекомендую .stop() для быстрой парит, как это:

$("tr a").hoverIntent(function() { 
    $(this).siblings(".logRemove").stop().fadeIn(100); 
}, function() { 
    $(this).siblings(".logRemove").stop().fadeOut(100); 
}); 
+0

Ах, спасибо большое! Получил его работу и смог настроить конфигурацию hoverintent так, как я этого хотел. – pschorr