javascript - Why won't my jQuery animate effect work? -

javascript - Why won't my jQuery animate effect work? -

this html, in head:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.js"></script>

where 2nd js document!! js document looks this:

$(document).ready(function() { $("li").fadeto(0, 0.6), $("li").mouseenter(function() { $(this).fadeto(100, 1), $(this).animate({top: "-=20px"},"fast") }); $("li").mouseleave(function() { $(this).fadeto(100, 0.6), $(this).animate({top: "=20px"},"fast") }); });

the opacity works, not animation, wrong?

your <li> elements need have position value of fixed, relative or absolute if animating top css. without it, animation still complete, won't see visual effect in browser.

class="snippet-code-js lang-js prettyprint-override">$(document).ready(function() { $("li").fadeto(0, 0.6), $("li").mouseenter(function() { $(this).fadeto(100, 1), $(this).animate({top: "-=20px"},"fast") }); $("li").mouseleave(function() { $(this).fadeto(100, 0.6), $(this).animate({top: "=20px"},"fast") }); }); class="snippet-code-css lang-css prettyprint-override">li { position:absolute; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>

javascript jquery jquery-animate