jQuery切换方法的动画不起作用

jquery toggle method's animation does't work

本文关键字：动画 不起作用 方法 jQuery      更新时间：2023-09-26

在显示的HTML代码中，我有JQUERY脚本，用于切换带有"红色"和"绿色"类的元素。 我的代码切换它们但没有动画！ 我想将它们切换为"慢速"模式。我也通过动画方法尝试过，但它不起作用。请帮助我。

<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/jscript"></script>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
div{
	position:relative;
	transition:all ease .5s;
	}
#container{
	width:816px;
	padding:0px;
	
	background:black;
	margin:0px auto;
	perspective:600px;
	
	}
.myDiv{
	position:relative;
	float:left;
	
	border:2px gray solid;
	width:200px;
	height:200px;
	padding:0px;	
	
	}
.myDiv:hover{
	
	-webkit-transform:translateY(100%);
	background:#666;
	
	}
	#clear{
		clear:both;
		}
	#filters{
		padding:30px 0px;
		color:white;
		}	
	#filters span{
		padding:5px;
		border:2px white solid;
		margin:0px 10px;
		
		
		}
	.red{
		background:red;
		}
	.green{
			background:green;
		}	
</style>
</head>
<body>
	<div id="container">
    <div id="filters"><span onClick="red()">red</span><span onClick="green()">green</span></div>
        <div class="myDiv red"></div><div class="myDiv red"></div><div  class="myDiv red"></div><div class="myDiv green"></div>
        <div class="myDiv red"></div><div class="myDiv green"></div><div  class="myDiv red"></div><div class="myDiv green"></div>
        <div  class="myDiv green"></div><div class="myDiv green"></div><div class="myDiv red"></div><div class="myDiv red"></div>
        <div class="myDiv green"></div><div class="myDiv green"></div><div class="myDiv red"></div><div class="myDiv red"></div>        
        <div id="clear"></div>
    </div>
    <script>
	function red(){
		var myArray =$(".red");
		myArray.toggle(5000);
		
		}
	function green(){
		var myArray =$(".green");
		myArray.toggle(5000);
	
		}
</script>
</body>
</html>

首先，你的代码片段中没有有效的jquery。

此外，在调用它们之前，您还需要编写JavaScript函数。就像在头部部分一样。最好使用 on（） 而不是为每个单独的元素添加onclick，例如，

网页，

<span id="red">red</span>

Jquery，

$(function(){
   $('#red').on('click',function(){
       var myArray = $(".red");
       myArray.toggle("slow");
   });
});


div {
  position: relative;
  transition: all ease .5s;
}
#container {
  width: 816px;
  padding: 0px;
  background: black;
  margin: 0px auto;
  perspective: 600px;
}
.myDiv {
  position: relative;
  float: left;
  border: 2px gray solid;
  width: 200px;
  height: 200px;
  padding: 0px;
}
.myDiv:hover {
  -webkit-transform: translateY(100%);
  background: #666;
}
#clear {
  clear: both;
}
#filters {
  padding: 30px 0px;
  color: white;
}
#filters span {
  padding: 5px;
  border: 2px white solid;
  margin: 0px 10px;
}
.red {
  background: red;
}
.green {
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  function red() {
    var myArray = $(".red");
    myArray.toggle("slow");
  }
  function green() {
    var myArray = $(".green");
    myArray.toggle("slow");
  }
</script>
<div id="container">
  <div id="filters"><span onClick="red()">red</span><span onClick="green()">green</span>
  </div>
  <div class="myDiv red"></div>
  <div class="myDiv red"></div>
  <div class="myDiv red"></div>
  <div class="myDiv green"></div>
  <div class="myDiv red"></div>
  <div class="myDiv green"></div>
  <div class="myDiv red"></div>
  <div class="myDiv green"></div>
  <div class="myDiv green"></div>
  <div class="myDiv green"></div>
  <div class="myDiv red"></div>
  <div class="myDiv red"></div>
  <div class="myDiv green"></div>
  <div class="myDiv green"></div>
  <div class="myDiv red"></div>
  <div class="myDiv red"></div>
  <div id="clear"></div>
</div>
</div

相关文章：