this is the html, all in the 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 the 2nd is my js document!! The js document looks like 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, but not the animation, what is wrong?
Your <li>
elements need to have a position value of fixed
, relative
or absolute
if you are animating the top
CSS. Without it, the animation will still complete, but you won't see any visual effect in the browser.
$(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") }); });
li { position:absolute; }
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.