jQuery Animate: What am I doing wrong? Just need to scroll to the left
I am really, reall开发者_运维知识库y missing something with jQuery's .animate() function. I can't get it to work for the life of me.
I have some simple HTML:
<div id="header">
<div class="logo">
<img src="img/logo.png">
</div>
</div> <!--End header -->
<div id="status_bar">
<br/>
<h1> blah blah. </h2>
<br/>
</div> <!--End status bar -->
</div><!--End Container -->
And some simple CSS. The important thing here is that the header has a background of a cloud:
body{
font-family: Josefin Sans,Arial, Helvetica, sans-serif;
background-color:#8ba8ff;
text-align:center;
}
#container{
width:960px;
margin: 0 auto;
clear:both;
}
#header {
float:left;
width:960px;
background-image: url("img/MCCloud.png");
background-repeat: no-repeat;
background-position: 1000px 0px;
}
#status_bar{
float:left;
width:960px;
border-top: solid 1px;
border-bottom: solid 1px;
text-align: left;
font-size: 65px;
}
.logo{
width:400px;
float:left;
display: inline;
}
#content{
position: relative;
width:960px;
}
And then some simple jQuery:
$(document).ready(function(){
$('#header').click(function() {
$('#header').animate({backgroundPosition: '(300px 0px)'}, 20000);
alert("Hey I got clicked"); //Just to test jQ
});
});
Problem is that outside of the alert(), nothing works. it never animates. I've tried futzing with all of it's parameters. I figure I just have to be missing something incredibly basic or misunderstanding how .animate() works, but I'm having a hard time finding a relevant tutorial. Help?
Try making the '(300px 0px)'
either '300px 0px'
or (300 0)
You don't need parenthesis in your pixel size. This works:
$(document).ready(function(){
$('#header').click(function() {
$('#header').animate({backgroundPosition: '300px 0px'}, 20000);
});
});
can you try "this"
$(this).animate({backgroundPosition: '(300px 0px)'}, 20000);
if above doesn't work , check if backgroundposition syntax is correct.
try this , play aroound with left//
$(this).animate({
opacity: 0.25,
left: '+=50'
}, 5000, function() {
});
try position relative also
#header {
position:relative;
}
the below html is wroing
<div id="status_bar">
<br/>
<h1> blah blah. </h2>
<br/>
</div> <!--End status bar -->
</div><!--End Container -->
Use this, no "()" with the value;
$('#header').click(function() {
$(this).animate({
'background-position': '300px 0px'
}, {
duration: 2000
});
});
精彩评论