自动精灵计算-CSS3还是Jquery？

我在我的图库中使用图像精灵。为了在正确的位置获得正确的背景图像，我使用以下方法：

<style>
#container div:nth-child(1){background-position:0 0}
#container div:nth-child(2){background-position:200px 0}
#container div:nth-child(3){background-position:400px 0}
#container div:nth-child(4){background-position:600px 0}
#container div:nth-child(5){background-position:800px 0}
#container div:nth-child(6){background-position:1000px 0}
</style>

#容器分区：第n个子（1）{背景位置：0}
#容器分区：第n个子（2）{背景位置：200px 0}
#容器分区：第n个子（3）{背景位置：400px 0}
#容器分区：第n个子（4）{背景位置：600px 0}
#容器分区：第n个子（5）{背景位置：800px 0}
#容器分区：第n个子（6）{背景位置：1000px 0}

当有许多div标记，并且要添加的数字例如是73px而不是200时，计算所有背景值非常耗时。它还占用了大量的css代码

我可以使用CSS3以另一种方式获得相同的结果吗？

否则，我想知道是否有人可以查看我的jquery脚本，看看是否有更好的方法可以完成某些事情（脚本可以正常工作）：

1.
2.
3.
4.
5.
6.
$（函数（）{
$（“#容器分区：第一个孩子”）.fadeIn（400，showNext）；
});
函数showNext（）{
var test1=$（this）.index（），
test2=test1*200；
如果（navigator.appName=='MicrosoftInternetExplorer'）{
$（this.css（'backgroundPositionX'，-test2）；
}
否则{
$（this.css（'backgroundPosition'，-test2）；
}
$（this.next（）.fadeIn（400，showNext）；
}

我没有背景图像，但下面是一个使用传递给CSS的函数修改元素高度的示例。您只需将

height

属性与

backgroundPosition

one交换，然后将返回值切换为负值

这将大大减少您的代码

$(function() {
    $("#container div").css('height', function(i, oldValue) {
        return (i+1)*200;
    }).fadeIn(400);
});

如果要修改多个CSS属性，则需要使用map或.CSS示例页面上概述的其他一些方法：

---

哦，顺便说一句，永远不要显式地检测这样的浏览器。你想做功能检测，因为我打赌你的代码破坏了IE9，假设IE9现在处理背景定位的方式不同于IE8

谢谢你，亚当！我将继续播放，并返回我的最终结果。如果我的答案有帮助，请投票并/或将其标记为答案！祝你好运

$(function() {
    $("#container div").css('height', function(i, oldValue) {
        return (i+1)*200;
    }).fadeIn(400);
});