анимация объектов одного класса, по одному за раз

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

$('div.anime').hover( function() {
$('.box').animate({'do something cool'});
});

Все коробки имеют один и тот же класс anime. Так что я просто пытаюсь понять, как анимировать только тогда, когда вы зависаете над одним, не давая им всем отдельные классы, которые вы знаете?

Я знаю, что это простой вопрос, но я все еще изучаю способы jQuery :) поэтому, пожалуйста, потерпите меня

Вот HTML:

<div class="anime">

<div class="box">Hey show me! Im cool!</div>
</div>
4 2
javascript jquery jquery-animate

4 ответа:

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

Пример

Учитывая следующий HTML 

<div class="anime">

    <p>other stuff</p>

    <div class="box">
        <p>content</p>
    </div>

</div>

Этот javascript (с помощью jQuery) будет выбирать и анимировать только .box, содержащиеся в зависшем на .anime, потому что я использую .find() функция для обхода DOM по отношению к $(this) (элемент, который был завис).

$('div.anime').hover( function() {
    $(this).find('.box').animate({'do something cool'});
});

Вы можете прочитать больше и найти больше функций для обхода DOM здесь.

4

Попробуйте использовать функцию each из jquery 

$( "div.anime" ).each(function(){

$(this).hover( function() {
   $(this).find('.box').animate({'do something cool'});
});

});
2

В javascript вы можете захватить цель события с помощью "this". Использование "этого" ограничит метод animate объектом, на который воздействуют.

$('div.anime').hover(function(e){
   $(this).animate({'do something cool'});

}, function(){
   // dont forget on mouseout
   $(this).animate({'return to normal state'});

})
1
$('div.anime .box').hover( function() {
$(this).animate({'do something cool'});
});
0