Question

在加载时 - 我正在运行以下动画，精灵的CSS背景位置和文本块的外观。所有人都在没有css.background。任何人都知道为什么jquery似乎忽略了css调用？或建议的工作？

function roll_a() {
$("#a").css("background-position", "0px -444px");
$("#a_text").delay(1000).slideDown();
$("#a").css("background-position", "0px 0px");
$("#a_text").delay(500).slideUp();

$("#b").css("background-position", "0px -216px");
$("#b_text").delay(2000).slideDown();
$("#b").css("background-position", "0px 0px");
$("#b_text").delay(500).slideUp();
}

然而，这在其他地方有效，但只是在鼠标悬停时。

    $("#a").mouseenter(function() {
    $("#a").css("background-position", "0px -444px");
    $("#a_text").slideDown();
    }).mouseleave(function() {
    $("#a").css("background-position", "0px 0px");
    $("#a_text").slideUp();
    });

Answer 1

我相信jQuery中的正确语法是：

$("#a").css("backgroundPosition", "0px -444px");

backgroundPosition 而非 背景位置

Answer 2

解决。

JQuery如此之快......它瞬间移动了背景位置 - 甚至没有眨眼。通过使用setTimeout能够将其减慢到足以显示效果。

$("#a_text").delay(1000).slideDown();
   setTimeout( function(){
   $("#a").css("background-position", "0px -444px");
},1000);

$("#a_text").delay(500).slideUp();
   setTimeout( function(){
   $("#a").css("background-position", "0px 0px");
},2000);

jquery背景定位的背景精灵

2 个答案: