Background position animation | Вопросы и ответы

Андер в рубрику JavaScript

30 сентября 2010

Вопрос: Background position animation

http://vremenno.net/js/plaginy-jquery-background-position-animations/

Сделал аналогию по этой статье, не работает. Интересно где ошибаюсь.


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="Untitled-2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bgpos.js"></script>
<style type="text/css">
$('#mbg1').mouseover(function()
        {
            $(this).stop(); $(this).animate({backgroundPosition: '(0px -20px)'});
        }).mouseout(function()
        {
            $(this).stop(); $(this).animate({backgroundPosition: '(0px 0px)'});
        });
</style>
</head>

<body>
<div class="movableBG" id="mbg1" style="background-position: 0px 0px">
    <div class="left">
        <div class="right">Vremenno.net</div>
    </div>
</div>

</body>
</html>


.left
    {
        background: url(o_nas_Plashka_40x170.png) left top no-repeat;
    }
.right
    {
        background:  url(o_nas_Plashka_40x170.png) left top no-repeat;
        
    }
.movableBG
    {
        margin: 0px;
        width: 170px;
        height: 20px;
        font-size: 16px;
        cursor: pointer;
    }

Ответы на вопрос — 13

Выложи в интернет. В дропбокс, например.

http://dl.dropbox.com/u/12457985/test/Untitled-2.css
http://dl.dropbox.com/u/12457985/test/Untitled-1.html
http://dl.dropbox.com/u/12457985/test/o_nas_Plashka_40x170.png
http://dl.dropbox.com/u/12457985/test/js/jquery.bgpos.js
http://dl.dropbox.com/u/12457985/test/js/jquery.min.js

так пойдет? :)

Можно было обойтись и html )

У тебя (ничего, что я на ты?) прописано движение бэкграунда для #mbg1, в то время как сам бэкграунд прописан у дочерних элементов.

Ничего, это ж интернет )

т.е. оставляю так и в css дописываю бэкграунд


<div class="movableBG" id="mbg1" style="background-position: 0px 0px">

</div>

Чегот та же фигня.

В чем может быть загвоздка? Уже несколько вариантов перепробовал. И класс и айди местами менять, и функцию вставлять в отдельный подгружаемый файл.

Андер, ну вам ведь написали. У вас анимация применяется к фону элемента с id "mbg1". Но у этого элемента в фоне нет картинки. Картинки у вас у элементов с классами left и right.

Упростил.


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="Untitled-2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bgpos.js"></script>
<style type="text/css">
$('.mbg1').mouseover(function()
        {
            $(this).stop(); $(this).animate({backgroundPosition: '(0px -20px)'});
        }).mouseout(function()
        {
            $(this).stop(); $(this).animate({backgroundPosition: '(0px 0px)'});
        });
</style>
</head>

<body>
<div class="mbg1">

</div>

</body>
</html>


.mbg1 {
		background:  url(o_nas_Plashka_40x170.png) left top no-repeat;
        margin: 0px;
        width: 170px;
        height: 20px;
        font-size: 16px;
        cursor: pointer;
}

Видно забыл пометить, что такая версия тоже не дееспособная.

http://vremenno.net/examples/bg-position-animation/sample1.htm

почему тогда вот здесь работает с разными id? и даже если взять этот код и подставить в него значения координат и свой png все прекращает работать.

Попробовал поменять координаты и ссылки на картинки в этом примере прямо через редактирование в Опере. Все прекрасно работает. У вас, в отличии от примера, скрипт не взят в:

$(document).ready(function(){
...
})

Попробуйте поправить.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="Untitled-2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bgpos.js"></script>
<style type="text/css">
$(document).ready(function(){
$('.mbg1').mouseover(function()
        {
            $(this).stop(); $(this).animate({backgroundPosition: '(0px -20px)'});
        }).mouseout(function()
        {
            $(this).stop(); $(this).animate({backgroundPosition: '(0px -20px)'});
        });
})
</style>
</head>

<body>
<div class="mbg1">
<a href="#"></a>
</div>

</body>
</html>


.mbg1 {
		background:  url(o_nas_Plashka_40x170.png) left top no-repeat;
        margin: 0px;
        width: 170px;
        height: 20px;
        font-size: 16px;
        cursor: pointer;
}

Вот все что у меня есть )
Ну и прикрепленные файлы jQuery.
Вариант с $(document).ready не сработал.

У вас скрипт в тэге style!!!! Как вы его запустить хотите???
И удалите stop() - он тут явно необязателен!
И mouseover - это из прошлого века.
И картинку вы двигаете в одну и ту же позицию ( 0 -20)

jQuery(function(){
jQuery('#mbg1').hover(function(){
jQuery(this).animate({backgroundPosition: '(0px -20px)'}, 350);
},
function(){
jQuery(this).animate({backgroundPosition: '(0px 0px)'}, 200);
});
});

там используеться заплатка backgriunPosition.js
(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == \'string\') {
var start = $.curCSS(fx.elem,\'backgroundPosition\');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+\' \'+nowPosX[1];
function toArray(strg){
strg = strg.replace(/left|top/g,\'0px\');
strg = strg.replace(/right|bottom/g,\'100%\');
strg = strg.replace(/([0-9\\.]+)(\\s|\\)|$)/g,\"$1px$2\");
var res = strg.match(/(-?[0-9\\.]+)(px|\\%|em|pt)\\s(-?[0-9\\.]+)(px|\\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);

Новый ответ

как выглядит	какой тег
жирный текст	<b>жирный текст</b>
курсивный тект	<i>курсивный тект</i>
~~зачеркнутый текст~~	<s>зачеркнутый текст</s>
подчеркнутый текст	<u>подчеркнутый текст</u>
ссылка	<a href="адрес">ссылка</a>
`function foo() { ... }`	<pre><code>function foo() { ... } </code></pre>

разрешенные теги или посмотреть как будет выглядеть

Имя

Эл. почта используется для Граватарки

Сайт

Имя в Твиттере

Сообщение

как выглядит	какой тег
жирный текст	<b>жирный текст</b>
курсивный тект	<i>курсивный тект</i>
~~зачеркнутый текст~~	<s>зачеркнутый текст</s>
подчеркнутый текст	<u>подчеркнутый текст</u>
ссылка	<a href="адрес">ссылка</a>
`function foo() { ... }`	<pre><code>function foo() { ... } </code></pre>

разрешенные теги или посмотреть как будет выглядеть

Спонсоры

Блогорол

Вопрос: Background position animation

Ответы на вопрос — 13

Новый ответ

metin2 pvp metin2 pvp serverler pvp serverler