Не работает анимация (JQuery), работает не так, как надо

Primary tabs

melisa's picture
Submitted by melisa on Fri, 06/09/2017 - 12:28

Forums:

Три вопроса:

  1. (magic...) конструкция .on('click') не работает при наличии вызовов .animate ниже. (без них работает корректно). Почему?
  2. событие mouseover - наведение курсора на указанный элемент? А обработчик срабатывает сразу при загрузке страницы. Почему?
  3. событие 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');
    });
}

Key Words for FKN + antitotal forum (CS VSU):

  • Log in to post comments
  • 4769 reads
melisa's picture

melisa

Fri, 06/09/2017 - 13:16

2) и 3) для метода .animate() были указаны неверные аргументы.
Обработчик для событий (в данном случае mouseover и mouseout) может быть создан только с помощью метода .on(), а в его теле уже необходимо поместить "ЧТО надо сделать "(в данном случае, .animate()). Правильный вариант будет выглядеть так:

    $('h4+p a').on('mouseover', function() {   // срабатывает при наведении курсора мыши на элемент
        $('h4+p a').animate({'font-size' : '30px'});
    });
    $('h4+p a').on('mouseout', function() {  // срабатывает при отведении курсора мыши с элемента
        $('h4+p a').animate({'font-size' : '16px'});
    });

1) первый вопрос (magic) решился автоматически (magic).

vedro-compota's picture

vedro-compota

Fri, 06/09/2017 - 13:22

1) первый вопрос (magic) решился автоматически (magic).

А необходимо отслеживать ошибки в консоли, он не мог магически не работать.

_____________
матфак вгу и остальная классика =)