mouseover для отображения выделенного div для ссылки

Мне нужно, чтобы каждая div-ссылка отображала соответствующий текст div в нижней части страницы. Я его частично настроил, но я хотел знать, есть ли лучший способ паролировать этот код.mouseover для отображения выделенного div для ссылки

<script type="text/javascript"> 
    $(function() { 
     $('#item1').hover(
     function() { 
      $('#Tile1').fadeIn('fast'); 
     }, 
     function() { 
      $('#Tile1').fadeOut('fast'); 
     }); 
    }); 

    $(function() { 
     $('#item2').hover(
     function() { 
      $('#Tile2').fadeIn('fast'); 
     }, 
     function() { 
      $('#Tile2').fadeOut('fast'); 
     }); 
    }); 
</script> 
<div class="four columns alpha"> 
    <a href="solutions/mobile.php" id="item1"> 
    <img src="images/1.png" alt="" class="tiles" /></a> 
</div> 
<div id="Tile1" class=" sixteen columns" style="display: none;"> 
    <h3 class="center">GIS/Mapping</h3> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id justo 
    </p> 
</div>

дивы не вложены, потому что я хочу, чтобы текст не всегда появляются в нижней части страницы, независимо от того, какой канал связи вы наведите курсор мыши.

источник

2013-02-22 kayhart

$(function(){ ... } не нужно повторять для каждой функции, и вы можете использовать функции, такие как fadeToggle(), чтобы уменьшить количество кода:

$(function() { 
    $("div[id^='item']").hover(function(){ 
     var selector = '#Tile' + $(this).attr('id').replace('item', ''); 
     $(selector).fadeToggle('fast'); 
    }); 
});

это предполагает, что идентификаторы всегда в формате: item(N) карты до Title(N).

Вторая строка выбирает все элементы, где идентификатор начинается с item и линией, которая следует выбирает идентификатор после item и использует его для выбора соответствующего <div>.

источник

2013-02-22 16:24:15

Это сработало красиво! Можно попросить вас сделать еще один шаг со мной? Я заметил, что как только анимация началась, она не остановится, пока не будет соревноваться * ex. Если я спам наведите курсор на несколько элементов, переключатель переключится до тех пор, пока не будет завершена каждая команда мыши. Это звучит непринужденно, я знаю, но если вы знаете, как его решить, я был бы признателен. – kayhart

Не видя своей точной реализации, вы можете использовать '$ (selector) .stop(). FadeToggle ('fast')', чтобы остановить текущую анимацию. –

Вот быстрая и грязная ссылка JsFiddle, если вы хотите взглянуть. http://jsfiddle.net/wVKvL/, если вы быстро переверните ссылки, переключатель div продолжит движение. – kayhart

Если я это правильно понимаю. вы хотите показать контент <div> рядом с <a> div. можешь попробовать.

$(function() { 
    $('[id^=item]').hover(function(){ 
     $(this).parent().next().fadeToggle(); 
    }); 
});

источник

2013-02-22 16:27:33

mouseover для отображения выделенного div для ссылки

ответ

Смежные вопросы