Question

在显示的HTML代码中我有JQUERY脚本用于切换元素＆＃34; red＆＃34;和＆＃34;绿色＆＃34;类。我的代码切换它们但没有动画！我希望将它们切换为“慢慢地”＃34;模式。我也通过动画方法尝试它，但它不起作用。请帮我。

＆＃13;

<!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>

＆＃13;

Answer 1

首先，您的代码段中没有可用的jquery。

此外，您需要在调用之前编写javascript函数。就像在头部。最好使用on()而不是将onclick添加到每个元素，例如

HTML，

<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

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

1 个答案: