animate.css и jQuery

455

28 января 2017, 11:04

Почему при hover только один элемент анимируется? хотя id одинаковый дан. При помощи CSS при hover каждый элемент с одинаковым class/id анимируется. Как добиться этого на JS?

$('#img_one').hover(function(){ 
  $('#img_one').addClass('animated infinite bounce'); 
}, function(){ 
  $('#img_one').removeClass('animated infinite bounce'); 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<img src="http://placehold.it/350x150" alt="img" id="img_one" /> 
<img src="http://placehold.it/350x150" alt="img" id="img_one" />

Answer 1

Во-первых: надо использовать не id, a class. Ибо этих элементов много. При работе с css вы вроде должны были знать это.

Во-вторых: использовать this как указатель на элемент, над которым происходит событие.

$('.img_one').hover(function(){ 
  $(this).addClass('animated infinite bounce'); 
}, function(){ 
  $(this).removeClass('animated infinite bounce'); 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<img src="http://placehold.it/350x150" alt="img" class="img_one" /> 
<img src="http://placehold.it/350x150" alt="img" class="img_one" />

Answer 2

$('.img_one').hover(function(){ 
  $('.img_one').addClass('animated infinite bounce'); 
}, function(){ 
  $('.img_one').removeClass('animated infinite bounce'); 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<img src="http://placehold.it/350x150" alt="img" class="img_one" /> 
<img src="http://placehold.it/350x150" alt="img" class="img_one" />