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

Три вопроса:

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');
    });
}