Prevent .stop() from stopping other animations
<p>So i have this little drop down arrow <code>&lt;div&gt;</code> that i want to move up when it's clicked, which works. But there's another animation on it which changes its opacity and uses the jQuery function <code>.stop()</code>. The problem is that whenever i hover over it during the sliding animation, the element stops dead in its tracks and doesn't finish the animation. </p>

<p>How do i solve this?</p>

<p>PS: if anyone has any suggestions on how to toggleclick two functions, i'd love to hear them, the one for hover seems a lot more convenient. Adding an attribute just for that is kind of lame.</p>

<p>EDIT: usable example: <a href="http://plnkr.co/edit/swuKbS3uM8G6stFnUT8U?p=preview" rel="nofollow">http://plnkr.co/edit/swuKbS3uM8G6stFnUT8U?p=preview</a></p>

<pre><code>$(document).ready(function () {
    console.log("ready for action!");


    // Dropdown icon hover

    $("#dropdownIcon").hover(function () {
        $(this).stop(true).fadeTo(500, 1);
        console.log("hovering");
    }, function () {
        $(this).stop(true).fadeTo(500, 0.3);
        console.log("no longer hovering");
    });


    // Clicking on dropdown icon

    $("#dropdownIcon").on("click", function () {
        $(this).find("i").toggleClass("fa-chevron-down fa-chevron-up");
        console.log("i clicked on the thing!");
        if ($(this).attr("data-click-state") == 1) {
            $(this).attr("data-click-state", 0);
            $(this).animate({bottom:"0"},1000);
            console.log("clicked once");
        } else {
            $(this).attr("data-click-state", 1);
            $(this).animate({bottom:"50%"},1000);
            console.log("clicked again");
        }
    });

}); 
</code></pre>

<p>HTML 
    
    </p>

<pre><code>&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;link type="text/css" rel="stylesheet" href="CSS/normalize.css" /&gt;
    &lt;link type="text/css" rel="stylesheet" href="CSS/main.css" /&gt;
    &lt;link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"&gt;
    &lt;title&gt;Rmonik&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="wrapper"&gt;
        &lt;header&gt;
            &lt;h1&gt;
                RMONIK
            &lt;/h1&gt;
            &lt;div id="dropdownIcon" data-click-state="0"&gt;
                &lt;i class="fa fa-chevron-down" aria-hidden="true"&gt;&lt;/i&gt;
            &lt;/div&gt;

        &lt;/header&gt;

        &lt;nav&gt;&lt;/nav&gt;
    &lt;/div&gt;
    &lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="Javascript/main.js"&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt; 
</code></pre>