Почему функция анимации jQuery backgroundPosition вместо анимации прыгает? - PullRequest
Новая
       8

Почему функция анимации jQuery backgroundPosition вместо анимации прыгает?

1 голос
/ 30 марта 2010

Я пытаюсь создать 3 кнопки (изображение является фоновым изображением), которые плавно анимируются при наведении мыши.

Когда я использую следующие html, css и js, результатом является анимация jquery, в которой анимация просто переходит к результату вместо создания плавной анимации в направлении результата.

См. Результат по адресу: http://infinitize.com, В настоящее время анимируется только первая кнопка.

CSS: 

/*-- HOMEPAGE --*/
#buttons {margin-top:60px;}
#buttons a {display:inline-block;width:160px;border-bottom:none;color:#4b4f52;text-shadow:0 1px 0 #fff;font-size:20px;padding-top:180px;text-align:center;}
.bg-img-home {background:transparent url(<r:assets:url title="bg-img-home" />) no-repeat;}
#webdesign {background-position:0px 0px;}

HTML: 

<div id="buttons" class="span-24 last">
    <div class="span-3">&nbsp;</div>
    <div id="webdesign" class="span-5 bg-img-home"><a href="#" id="jump-webdesign">WebDesign<br />Web Development</a></div>
    <div class="span-2">&nbsp;</div>
    <div id="ecommerce" class="span-5 bg-img-home"><a href="#" id="jump-ecommerce">E-Commerce Solutions</a></div>
    <div class="span-2">&nbsp;</div>
    <div id="openbravo" class="span-5 bg-img-home"><a href="#" id="jump-openbravo">OpenBravo<br />ERP/POS solutions</a></div>
    <div class="span-2 last">&nbsp;</div>
</div>

Сценарий: 

$(document).ready(function(){
    $("#jump-webdesign").hover(function(){
            $("#webdesign")
            .animate({backgroundPosition: '0px -10px'},200).animate({backgroundPosition:'0px 0px'},200)
    });
});

1 Ответ

1 голос
/ 30 марта 2010

Установите время анимации на что-то длиннее, 200 миллисекунд - это очень быстро.

Исходя из вашего комментария, попробуйте анимировать верхнее поле: 

$("#jump-webdesign").hover(
    function() {
        $(this).children("#webdesign").animate({
            marginTop: "-10px"
        }, 500);
    },
    function() {
        $(this).children("#webdesign").animate({
            marginTop: "0px"
        }, 500);
    }
);
...