Question

以下脚本在大多数浏览器中都能正常运行，但在Firefox中完全没有。如果有人有任何想法，那将是一个很大的帮助。我已经包含了jQuery 我正在尝试制作一个精灵按钮。

<script type='text/javascript'>
$(document).ready(function() {

var intval="";
var rewind ="";
$('#logo').hover(function(){
    if(intval==""){
        intval =window.setInterval(play_animation,30);
    }
},function(){
    window.clearInterval(intval);
    intval="";
    if(rewind==""){
        rewind=window.setInterval(rewind_animation,30);
    }
});

function play_animation(){
    //retrieve background x-coordinate because IE only recognize 'background-position
    var frame = $('#logo').css('background-position-x').split(' ');
    var framei =parseInt(frame[0].split('px'));
    if(framei > (-360)){
        var xpos =framei-40;
        $('#logo').css({'backgroundPosition':xpos+'px 0px'});
    }
}

function rewind_animation(){
    var frame = $('#logo').css('background-position-x').split(' ');
    var framei =parseInt(frame[0].split('px'));
    //if background position exist, rewind back to starting point
    if(framei ){
        var xpos =framei+40;
        $('#logo').css({'backgroundPosition':xpos+'px 0px'});
    }
    //when animation returns to starting point clear out the interval function
    if(framei==0){
        window.clearInterval(rewind);
        rewind="";
    }
}

});
</script>

和最初的CSS：

#logo{
 background:url(circles2.jpg) 0px 0px no-repeat;
 height:40px;
 width:40px;
 display:block;
}

Answer 1

你有var frame = $('#logo').css('background-position-x').split(' ');

的地方

我认为你实际上想要var frame = $('#logo').css('background-position').split(' ');（删除“-x”）。这为我解决了这个问题。

JavaScript无法在Firefox中运行。可能是parseInt

1 个答案: