Why is my jQuery not working/showing when I open my browser?
Question
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> $(document).ready(function() { $('#top_message').slideDown(300); }); </script> <meta charset="utf-8"> <title>jQuery</title> <style type="text/css"> #top_message { height: 50px; width: 75%; background-color: orange; } </style> </head> <body> <div id="top_message"> We can see you're not logged in. Do you want to <a href="#">sign up</a>? </div> </body> </html>
I run the code on my browser and it doesn't slide down like it is meant to, what have I done wrong? Thanks.
2 answers
solution1
1 ACCPTED
Because you're trying to use the same script to load jQuery and your own code too.
Use two different scripts instead.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#top_message').slideDown(300);
});
</script>
solution2
0 2015-12-05 15:50:34
Possibly because you're expecting slideDown() to slide the content down the page (ie change the top position).
slideDown() animates the height to 100%
The .slideDown() method animates the height of the matched elements. This causes lower parts of the page to slide down, making way for the revealed items.
Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.
As your element is already visible, changing from 100% to 100% has no effect .
Change your code to:
$('#top_message').hide().slideDown(300);
and you'll see what it does: https://jsfiddle.net/cqwbtdb1/
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.