Having issue with jQuery animate()
Here is my html doc. I'm trying to work my one header to开发者_高级运维 another position using jQuery animate() and for some reason I can't get it to fire. The fadeOut and fadeIn work so I know that my JavaScript href is working. Also, it doesn't have to do with not declaring the document type.
<html>
<head>
<title>We Hate Treyarch - Let your opinions mean something </title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$(window).load(function(){
$("#underhead").animate
({top:600px;left:600px;},2000);
$("#underhead").animate
({top:170px;left:165px;},5000);
});
});
</script>
</head>
<body>
<div id="tophead"></div>
<div id="sechead"> </div>
<div id="header">
<h1 id="hye">We <span class="kame"><b>hate</b></span> treyarch</h1>
</div>
<div id="underhead">and so do you...</div>
</body>
</html>
A javascript object is not defined like this:
{top:600px;left:600px;}
It's this:
{top:"600px", left:"600px"}
This must be javascript syntax, not CSS syntax.
This should have been described for you in the javascript error console or the console window in whatever js debugger you use as it's a javascript syntax error.
Also, there no reason to use both:
$(function(){
with this inside of it:
$(window).load(function(){
Use one or the other. I'd suggest just the jQuery version unless you have to wait for images to finish loading in which case only use the window.load version.
This code works:
$(function(){
$("#underhead").animate({top: "600px", left: "600px"}, 2000);
$("#underhead").animate({top: "170px", left: "165px"}, 5000);
});
and you can see it in action here: http://jsfiddle.net/jfriend00/V23rW/.
Here's the correct animate syntax, yours is wrong.
$('#id').click(function() {
$('.class').animate({
opacity: 0.25,
}, 5000, function() {
});
});
加载中,请稍侯......
精彩评论