Применение Hoverintent к Jquery Hover - PullRequest
Новая
       53

Применение Hoverintent к Jquery Hover

2 голосов
/ 19 июля 2010

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

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

<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);}
);

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

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

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

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

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

1 Ответ

1 голос
/ 19 июля 2010

Вы все еще можете использовать 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);
});
...