Почему обработчик срабатывает не со всеми тегами?

Question

[Max Rudik]

Добрый день!
Повесил обработчик клика на несколько тегов с общим классом.

<h2 class = "anima">Найди правильный ответ</h2>//заголовок
 <li><a class = "anima" href="index.html">1</a></li>// пагинация
  <li><a class = "anima" href="plus1.html">2</a></li>
  <li><a class = "anima" href="plus2.html">3</a></li>
<script>	
		$('.anima').click(function(){
			$('.animation-left').animate({opacity:0},300).animate({opacity:1},300);
		});	
</script>

При клике на h2 все работает, а при клике на элементы пагинации - ни в какую.
Почему так? Как заставить работать в т.ч. по клику на ссылки?

Comments

[Алексей Зуев]

Вместо анимации происходит переход по ссылке?

[Max Rudik]

Да, а я хотел, чтобы переход по ссылке был анимирован

[Алексей Зуев]

Max Rudik: гуглите preventDefault

[Max Rudik]

ок, спасибо!

Answer 1

[sunrails]

https://api.jquery.com/event.preventdefault/

<h2 class = "anima">Найди правильный ответ</h2>//заголовок
 <li><a class = "anima" href="index.html">1</a></li>// пагинация
  <li><a class = "anima" href="plus1.html">2</a></li>
  <li><a class = "anima" href="plus2.html">3</a></li>

$('.anima').click(function(e){
    e.preventDefault();
    $('.animation-left').animate({opacity:0},300).animate({opacity:1},300);
});

https://jsfiddle.net/frw7bst5/

Comments

[Max Rudik]

отлично, анимация заработала, осталось восстановить работоспособность ссылок)

[sunrails]

Max Rudik: объясните подробно что вы пытаетесь сделать?)

[Max Rudik]

У меня на странице пагинация 1, 2,3 и т.д. Я хочу получить эффект плавного появления страниц при переходе по ссылкам.

[sunrails]

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

Плавно это как, без перезагрузки страницы?

[Max Rudik]

например так: произошел переход по ссылке, загрузилась другая страница, на ней сработала анимация свойства opacity 0 -> 1. Что я собственно и пытался сделать.

[sunrails]

Max Rudik: Ну тогда вам надо не на click вешать, а так $(document).ready(function() {//код})

[Max Rudik]

Спасибо! Пока разбирался с preventDefault честно говоря не видел ни одного примера его практического применения. Если нетрудно, подскажите пару примеров?

[sunrails]

https://developer.mozilla.org/en-US/docs/Web/API/E...