Question

我用jQuery创建了一个小视差动画。它在Safari中运行顺畅但在Firefox中非常不稳定。两者都在Mac上。也许你可以帮助我。谢谢！

这是我的代码：

var bgx = 0;

$(document).ready(function() {

	$(this).click(function(){
    	$("#cheat").append('<img src="images/cheat.gif"></img>');
    	$("#bike").animate({top: '250px', }, 10000);
	}); 
	
	parallax();

	function parallax(){
        console.log(counter);
        $("#background1").animate({backgroundPosition: bgx-=1000}, 100000, "linear");
        $("#background2").animate({backgroundPosition: bgx-=1000}, 80000, "linear");
        $("#background3").animate({backgroundPosition: bgx-=1000}, 50000, "linear");
        $("#background4").animate({backgroundPosition: bgx-=1000}, 10000, "linear", parallax);
    }
});

Answer 1

很抱歉，以下是script.js中包含一些注释的完整代码。柜台没有任何功能。

＆＃13;

var bgx = 0; //value for background-position

$(document).ready(function() {

	$(this).click(function(){
    	$("#cheat").append('<img src="images/cheat.gif"></img>');
    	$("#bike").animate({top: '250px', }, 10000);
	}); 
	
	parallax(); //

	function parallax(){ //animate the background-position
        $("#background1").animate({backgroundPosition: bgx-=1000}, 100000, "linear");
        $("#background2").animate({backgroundPosition: bgx-=1000}, 80000, "linear");
        $("#background3").animate({backgroundPosition: bgx-=1000}, 50000, "linear");
        $("#background4").animate({backgroundPosition: bgx-=1000}, 10000, "linear", parallax); //recall function
    }
});

＆＃13;

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
}
img {
    height: 100%;
    width: auto;
    position: absolute;
}
#background0 {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    background-image: url(../images/bg0.png);
    background-repeat: repeat-x;
    background-color: green;
}
#background1 {
	width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background-image: url(../images/bg1.png);
    background-repeat: repeat-x;
    background-position: 0;
}
#background2 {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    background-image: url(../images/bg2.png);
    background-repeat: repeat-x;
    background-position: 0;
}
#background3 {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    background-image: url(../images/bg3.png);
    background-repeat: repeat-x;
    background-position: 0;
}
#background4 {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 4;
    background-image: url(../images/bg4.png);
    background-repeat: repeat-x;
    background-position: 0;
}
#bike {
	width: 100px;
	height: 100px;
	top: 635px;
	left: 45%;
	position: absolute;
    z-index: 4;
}
#cheat {
    width: 64px;
    height: 64px;
    position: absolute;
    top: 10px;
    left: 10px;
}

＆＃13;

<!DOCTYPE html>
<html>
	 <head>
	    <meta charset="utf-8">
		<title>MS01</title>
		<link href="css/style1.css" rel="stylesheet" type="text/css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="js/script.js"></script>
	</head>

	<body>
		<div id="background0"></div>
		<div id="background1"></div>
		<div id="background2"></div>
		<div id="background3"></div>
		<div id="background4"></div>

		<div id="bike"><img src="images/car.png"></div>

		<div id="cheat"></div>
	</body>

</html>

＆＃13;

var bgx = 0;

$(document).ready(function() {

	$(this).click(function(){
    	$("#cheat").append('<img src="images/cheat.gif"></img>');
    	$("#bike").animate({top: '250px', }, 10000);
	}); 
	
	parallax();

	function parallax(){
        console.log(counter);
        $("#background1").animate({backgroundPosition: bgx-=1000}, 100000, "linear");
        $("#background2").animate({backgroundPosition: bgx-=1000}, 80000, "linear");
        $("#background3").animate({backgroundPosition: bgx-=1000}, 50000, "linear");
        $("#background4").animate({backgroundPosition: bgx-=1000}, 10000, "linear", parallax);
    }
});

＆＃13;

jQuery动画的性能问题

1 个答案: