jQuery Animate: что я делаю не так?Просто нужно прокрутить влево - PullRequest
0 голосов
/ 23 ноября 2010

Я действительно очень скучаю по функции janu .animate (). Я не могу заставить его работать на всю жизнь.

У меня есть простой 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 -->

И несколько простых CSS. Здесь важно то, что заголовок имеет фон облака:

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

А потом несколько простых jQuery:

$(document).ready(function(){

        $('#header').click(function() {
        $('#header').animate({backgroundPosition: '(300px 0px)'}, 20000);
            alert("Hey I got clicked"); //Just to test jQ
        });

});

Проблема в том, что за пределами оповещения () ничего не работает. это никогда не оживляет. Я пытался futzing со всеми его параметрами. Я полагаю, что мне просто не хватает чего-то невероятно простого или недопонимания того, как работает .animate (), но мне трудно найти подходящий учебник. Помощь

Ответы [ 4 ]

1 голос
/ 23 ноября 2010

Вам не нужны скобки в размере вашего пикселя.Это работает:

$(document).ready(function(){

        $('#header').click(function() {
        $('#header').animate({backgroundPosition: '300px 0px'}, 20000);
        });

});
1 голос
/ 23 ноября 2010

Попробуйте сделать '(300px 0px)' либо '300px 0px', либо (300 0)

1 голос
/ 23 ноября 2010

можете ли вы попробовать "this"

$(this).animate({backgroundPosition: '(300px 0px)'}, 20000);

, если вышеприведенное не работает, проверьте правильность синтаксиса фонового расположения.

попробуйте это, проиграйте левой кнопкой //

$(this).animate({
    opacity: 0.25,
    left: '+=50'
  }, 5000, function() {
  });

Попробуйте также позиционировать относительно

#header {
position:relative;
}

ниже приведен html

<div id="status_bar">
        <br/>
            <h1> blah blah. </h2>
        <br/>
    </div> <!--End status bar -->
        </div><!--End Container -->
0 голосов
/ 23 ноября 2010

Используйте это, нет "()" со значением;

$('#header').click(function() {
    $(this).animate({
        'background-position': '300px 0px'
    }, {
        duration: 2000
    });
});
...