Question

当我点击按钮时，我希望我的CSS动画开始，并且由于我在uni的课程中的作业简要指示，我必须使用jquery才能帮助我吗？

＆＃13;

$('button').onClick(function(){
	$(".florence").addClass(".animate");
});

＆＃13;

body{
	margin:0;
	padding:0;
}
#background {
	width:1024px;
	height:768px;
	position:absolute;
	overflow:hidden;
}
button {
	width:300px;
	height:100px;
	color:#1f1f1f;
	background-color:#fff;
	position:absolute;
	top:500px;
	left:300px;
	z-index:1;
}
.sky {
	position:absolute;
	top:0;
	left:0;
}	
.grass {
	position:absolute;
	top:568px;
	left:0;
	float:left;
	-webkit-animation-duration: 3s;
 	-webkit-animation-name: grass;
 	-webkit-animation-timing-function: normal ease-out; 
}
.florence {
	position:absolute;
	top:100px;
	left:600px;
	float:left;
	z-index:1;
}
.animate {
	-webkit-animation-duration: 5s;
 	-webkit-animation-name: florence;
 	-webkit-animation-timing-function: normal ease-out; 
}
.cloud1 {
	position:absolute;
	top:70px;
	left:50px;
	float:left;
	z-index:1;
	-webkit-animation-duration: 3s;
 	-webkit-animation-name: cloudone;
 	-webkit-animation-timing-function: normal ease-out; 
}
.cloud2 {
	position:absolute;
	top:192px;
	left:195px;
	float:left;
	z-index:1;
	-webkit-animation-duration: 3s;
 	-webkit-animation-name: cloudtwo;
 	-webkit-animation-timing-function: normal ease-out; 
}
.cloud3 {
	position:absolute;
	top:100px;
	left:515px;
	float:left;
	-webkit-animation-duration: 3s;
 	-webkit-animation-name: cloudthree;
 	-webkit-animation-timing-function: normal ease-out; 
}
.cloud4 {
	position:absolute;
	top:10px;
	left:670px;
	float:left;
	-webkit-animation-duration: 3s;
 	-webkit-animation-name: cloudfour;
 	-webkit-animation-timing-function: normal ease-out; 
}
.cloud5 {
	position:absolute;
	top:70px;
	left:914px;
	float:left;
	-webkit-animation-duration: 3s;
 	-webkit-animation-name: cloudfive;
 	-webkit-animation-timing-function: normal ease-out; 
}
.sun {
	position:absolute;
	top:25px;
	left:275px;
	float:left;
	-webkit-animation-duration: 3s;
 	-webkit-animation-name: sun;
 	-webkit-animation-timing-function: normal ease-out; 
}






@-webkit-keyframes cloudone {
    0% {
        top:-300px;
        left:100px;
    }
    70% {
    	top:75px;
    }
    100% {
        top: 70px;
        left:50px;
    }
}
@-webkit-keyframes cloudtwo {
    0% {
        top:-300px;
        left:50px;
    }
    70% {
    	top:205px;
    }
    100% {
        top: 192px;
        left:195px;
    }
}
@-webkit-keyframes cloudthree {
    0% {
        top:-150px;
        left:565px;
    }
    70% {
    	top:110px;
    }
    100% {
        top:100px;
        left:515px;
    }
}
@-webkit-keyframes cloudfour {
    0% {
        top:-200px;
        left:570px;
    }
    70% {
    	top:15px;
    }
    100% {
        top:10px;
        left:670px;
    }
}
@-webkit-keyframes cloudfive {
    0% {
        top:-300px;
        left:1014px;
    }
    70% {
    	top:75px;
    }
    100% {
        top:70px;
        left:914px;
    }
}
@-webkit-keyframes sun {
    0% {
        top:-300px;
        left:100px;
    }
    70% {
    	top:65px;
    }
    100% {
        top:25px;
        left:275px;
    }
}
@-webkit-keyframes florence {
    0% {
        left:1024px;
    }
    100% {
        left:600px;
    }
}
@-webkit-keyframes grass {
    0% {
        top:590px;
    }
    100% {
        top:568px;
    }
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<title>Florence the Fluorescent Fuchsia</title>
		<link rel="stylesheet" href="css/style.css">
		<script type="text/javascript" src="js/script.js"></script>
	</head>
	<body>
		<div id="background">
			<button>Start</button>
			<img class="sky" src="images/sky.png">
			<img class="grass" src="images/grass.png">
			<img class="florence" class="animate" src="images/florence.png">
			<img class="cloud1" src="images/cloud1.png">
			<img class="cloud2" src="images/cloud2.png">
			<img class="cloud3" src="images/cloud3.png">
			<img class="cloud4" src="images/cloud4.png">
			<img class="cloud5" src="images/cloud5.png">
			<img class="sun" src="images/sun.png">
		</div>
	</body>
</html>

＆＃13;

Answer 1

试试这个。

  $('button').on('click',function(){

     $(".florence").addClass("animate");
  });

addClass(".animate")中有一个你不需要的点。它click onClick on('click',function(){})或{{1}}

Answer 2

您的“.florence”元素有两个类属性。你需要这样写：

<img class="florence animate" src="images/florence.png">

第二次添加类“animate”将不会做任何事情（评论中的小提琴示例仅起作用，因为第二个类属性被忽略。如果您再次单击该按钮，它将无法工作因为有效的类属性现在有一个动画类）。您需要再次删除并添加该类。不幸的是，你不能马上就这样做：

$(".florence").removeClass("animate");
$(".florence").addClass("animate");

这对动画也不起作用。你需要稍微延迟第二步：

$('button').click(function(){
    $(".florence").removeClass("animate");
    setTimeout(function(){ 
        $(".florence").addClass("animate");
     },1);
});

现在可以使用了。见JSFiddle

如何通过使用jQuery单击按钮来运行我的CSS动画？

2 个答案: