2014-09-01 19 views
0

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

Так HTML для каждого изображения и названия в сетке

<a href=""> 
<div class="front-menu-image"> 
<img src="" width="224" height="224"/> 
</div> 
<div class="front-menu-title">TITLE</div> 
</a> 

Я пробовал:

jQuery(document).ready(function($){ 

    jQuery('.front-menu-image').hover(
     function() { 
      jQuery(.front-menu-title).animate({height:'50'}); 
     }, 
     function() { 
      jQuery(.front-menu-title).animate({height:'25'}); 
     } 
    ); 
}); 

Но, очевидно, это вызвало все в сетке для анимации, когда я просто хочу о котором идет речь.

+0

Вы можете заменить 'jQuery' на короткий селектор:' $ '. Кроме того, ваши классы должны быть между qoutes. – timo

ответ

0

Попробуйте это ...

jQuery(document).ready(function($){ 
    jQuery('.front-menu-image').hover(
     function() { 
      jQuery(this).next('.front-menu-title').animate({height:'50'}); 
     }, 
     function() { 
      jQuery(this).next('.front-menu-title').animate({height:'25'}); 
     } 
    ); 
}); 

Он назначает обработчик событий же, но внутри это выглядит для следующего элемента с классом заголовка, по отношению к тому, что вы зависший над (см использование от this).

+0

Спасибо, ты мужчина! –

+0

Нет проблем - с удовольствием помогите :) – Archer

1

попробовать это:

$(function(){ 
    $(".front-menu-image").hover(
    function(){ 
     $(this).siblings(".front-menu-title").animate({height: '50'}) 
    } 
); 
}); 

Вы можете использовать это внутри обработчика событий, чтобы обратиться к текущему объекту.

0

Это будет анимировать только то изображение, на котором вы будете парить: -

jQuery(document).ready(function($){ 

jQuery('.front-menu-image').on('hover', function() { 
     jQuery(.front-menu-title).animate({height:'50'}); 
    }, 
    function() { 
     jQuery(.front-menu-title).animate({height:'25'}); 
    } 
); 
}); 

Для дополнительной информации о разнице между .click() и .он ('щелчок'), refere здесь Difference between .on('click') vs .click()

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