获取图片长宽失败和jQuery的animate失效问题

在写一个左右滚动图片的效果时，发生了2个比较头疼的问题。记录如下

首先基本思路是在需要滚动的地方加一个包着img标签的div，js拿到img标签的src值赋给div标签的css属性background-image，然后利用jQuery循环切换div的background-position值即可。

在实现过程中，chrome老是获取到img的宽和高为0，safari浏览器也是如此。后来发现是图片未载入时代码就已经执行了，因此获取到的宽和高为0，给执行函数包个$.load()函数，待img加载完毕再执行代码即可。

然后用此代码在ie又发现了相应的问题，原因还不知道，解决方案就是遇到ie浏览器时，生成个Image()对象，以此来获取img的宽和高。用js怎么判断ie浏览器？使用下面的代码即可：

var ie = ! ','.split(/,/).length;

获取图片宽高这个问题解决了，在利用jQuery的animate()函数对div的background-position进行改变时却发现此代码在firefox下失效了，在chrome下却正常执行，只好谷歌之，发现原因：firefox不支持background-position-x这个属性，而chrome支持，此属性并不是css标准属性。同时还发现animate()函数不能同时处理赋给background-position两个值，如果在animate()中放置一个值的话，浏览器将默认是x方向的值。这样的代码是错误的：

animate({'background-position': '10 0'})
animate({'background-position-x': '10'})

应为：

animate({'background-position': '10'})

这样问题完全解决了，但是如果需要在上下滚动图片的地方怎么办呢，好像只有为position的y方向上数值改变写一个滚动扩展了，临时解决方案可以使用jQuery的css()函数来代替animate()设置position的值，只是没有了好看的效果。

代码（上下滚动的图片）：

<div id="img">
    <img src="./img/exa.png">
</div>
<script type="text/javascript">
var ie = ! ','.split(/,/).length;
$('#img img').load(function(){
    var split = 3;
    var order = 1;
    if (ie) {
        var newImg = new Image();
        newImg.src = this.src;
        var height = newImg.height;
        var width = newImg.width;
    } else {
        var height = this.height;
        var width = this.width;
    }
    $('#img').css('width', width);
    $('#img').css('height', height / split);
    $('#img').css('background-image', 'url(' + this.src + ')');
    setInterval(function(){
        if (order == split) {
            order = 0;
            $('#img').css('background-position', '0 0');
        } else {
            $('#img').css('background-position', '0 -' + height / split * order + 'px');
        }
        order++;
    }, 3000);
});
</script>

代码（左右滚动的图片）：

<div id="img2">
    <img src="./img/exa2.png">
</div>
<script type="text/javascript">
var ie = ! ','.split(/,/).length;
$('#img2 img').load(function(){
    var split = 3;
    var order = 1;
    if (ie) {
        var newImg = new Image();
        newImg.src = this.src;
        var height = newImg.height;
        var width = newImg.width;
    } else {
        var height = this.height;
        var width = this.width;
    }
    $('#img2').css('height', height);
    $('#img2').css('width', width / split);
    $('#img2').css('background-image', 'url(' + this.src + ')');
    setInterval(function(){
        if (order == split) {
            order = 0;
            $('#img2').animate({'background-position': 0});
        } else {
            $('#img2').animate({'background-position': '-=' + width / split});
        }
        order++;
    }, 3000);
});
</script>