开发者

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
    });
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜