Question

我正在尝试创建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)
    });
});

Answer 1

将您的动画时间设置为更长的时间，200毫秒非常快。

根据您的评论，尝试设置上边距的动画：

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

为什么jQuery backgroundPosition动画函数跳转而不是动画？

1 个答案: