var $aaron = $("#aaron"); 请问这句代码是什么意思?
var $aaron = $("#aaron"); 请问这句代码是什么意思?
var $aaron = $("#aaron"); 请问这句代码是什么意思?
2016-07-19
这个意思是赋予$aaron 等于jq对象$("#aaron"); 这样的话 $aaron.animate({ ........ }) =$("#aaron").animate({ ........ })
其实可以不用这么写也行。直接把那句代码删了。
那下面就是判断语句是$("#aaron").animate({ ........ })。
这个命名不一定是$aaron、你可以自己命名。比如“a”、"b"、等等等。。。。
例如:
<style>
p {
color: red;
}
div{
width:200px;
height: 100px;
background-color: yellow;
border:1px solid red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>animate(上)</h2>
<p>慕课网,专注分享</p>
<div id="aaron">内部动画</div>
点击观察动画效果:
<select id="animation">
<option value="1">动画1</option>
<option value="2">动画2</option>
<option value="3">动画3</option>
<option value="4">动画4</option>
</select>
<input id="exec" type="button" value="执行动画">
<script type="text/javascript">
$("#exec").click(function(){
var v =$("#animation").val(); //赋予变量v为option的value值
var a =$("#aaron");//赋予a为元素aaron
if(v == "1"){
a.animate({
width:300,
height:300,
borderWidth:"4"
//所有用于动画的属性必须是数字的,你这里这么写border:'4px soli red',边框的颜色和类型不是数值类型的。所以只能用borderWidth,borderBottomWidth,borderLeftWidth,borderRightWidth,borderTopWidth,borderSpacing
})
}
else if(v == "2"){
a.animate({
left: 50, //需把元素定义绝对相对定位 position:relative;才有效
width:"+=100",//在现有的宽度基础上增加100px
height:"+=100",
})
}
else if(v == "3"){
a.animate({
fontSize:"5em"
})
}
else if(v == "4"){
a.animate({
opacity: 'hide'//或者opacity:0
},function(){
alert('动画执行完毕')
}
)}
})
</script>
</body>举报