Не работает анимация (JQuery), работает не так, как надо
Primary tabs
Три вопроса:
- (magic...) конструкция .on('click') не работает при наличии вызовов .animate ниже. (без них работает корректно). Почему?
- событие mouseover - наведение курсора на указанный элемент? А обработчик срабатывает сразу при загрузке страницы. Почему?
- событие mouseout - уход курсора с элемента? А обработчик вообще не срабатывает. Почему?
HTML:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Хелоу ворлд:)</title> <script src="jquery-3.2.1.js"></script> <!--<script src="jqueryUsing.js"></script>--> <script src="debugging.js"></script> <link rel="shortcut icon" href="favicon.ico" type="image/x-ico"> </head> <body> <h1>Привет! Здесь мы познакомимся с <span>JQuery</span></h1> <article id="my"> <h4>JQuery - это библиотека (framework) JavaScript, обеспечивающая интерактивную работу страницы.</h4> <p class = "announce">Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. Сейчас разработка jQuery ведётся командой jQuery во главе с Джоном Резигом.</p> </article> <article class="tt pm"> <img src="jquery.png" alt="logo is here"> <h4>Возможности JQuery</h4> <ul> <li>Движок кросс-браузерных CSS-селекторов Sizzle, выделившийся в отдельный проект;</li> <li>Переход по дереву DOM, включая поддержку XPath как плагина;</li> <li>События;</li> <li>Визуальные эффекты;</li> <li>AJAX-дополнения;</li> <li>JavaScript-плагины;</li> <li>Дополнительные возможности: <ul> <li>Писать смешные книжки про JQuery</li> <li>а тут внезапно можно узнать о <a href="Smth_more.jpg">смысле жизни. </a><span>Опасно! Не рекомендуется переходить по ссылке лицам с неустойчивой психикой.</span></li> </ul> </li> </ul> </article> <footer> <h4>Источники</h4> <p>Материал из <a href="https://ru.wikipedia.org/wiki/JQuery">Википедии</a> — свободной энциклопедии <br> "JQuery для начинающих". <span>А.Шевчук</span></p> </footer> </body> </html>
JavaScript:
$(function() { init(); }); function init() { var image_style = $("img").attr('style', 'float : right'); //Методы Анимации $("h1>span").on('click', function() { // Срабатывает только если закомментить оба метода animate(ниже) $("img").hide("3000"); $("img").show("3000"); }); $('h4+p a').animate('mouseover', function() { // почему-то срабатывает сразу при загрузке страницы. $('h4+p a').attr('style', 'font-size : 30px'); }); $('h4+p a').animate('mouseout', function() { // вообще не срабатывает(из-за типа события?) $('h4+p a').attr('style', 'font-size : 16px'); }); }
- Log in to post comments
- 4784 reads
melisa
Fri, 06/09/2017 - 13:16
Permalink
Ответ
2) и 3) для метода .animate() были указаны неверные аргументы.
Обработчик для событий (в данном случае mouseover и mouseout) может быть создан только с помощью метода .on(), а в его теле уже необходимо поместить "ЧТО надо сделать "(в данном случае, .animate()). Правильный вариант будет выглядеть так:
1) первый вопрос (magic) решился автоматически (magic).
vedro-compota
Fri, 06/09/2017 - 13:22
Permalink
1) первый вопрос (magic)
А необходимо отслеживать ошибки в консоли, он не мог магически не работать.
_____________
матфак вгу и остальная классика =)