当前位置:首页>开发>正文

jquery中的:animated怎么使用 关于jquery 的 animate()方法、

2023-06-07 15:29:52 互联网 未知 开发

 jquery中的:animated怎么使用 关于jquery 的 animate()方法、

jquery中的:animated怎么使用

// 在一个动画中同时应用三种类型的效果,animate()里面用键值对表示
$("#a").click(function(){   //绑定一个点击事件
  $("#b").animate({         
    width: "90%",           //设置点击之后需要改变之后的样式,以达到动画效果
    height: "100%", 
    fontSize: "10em", 
    borderWidth:   }, 1000 )                //动画的过度时间 1000毫秒
})

关于jquery 的 animate()方法、



// 用jquery的hover事件
$(.float).hover(function() {
    // 用stop方法停止上次动画
    $(this).stop().animate({
        left: 0
    }, 500, swing)
}, function() {
    $(this).stop().animate({
        left: -100
    }, 500, swing)
})

jQuery中利用animate移动问题。。

left就是left了, 是正值就是相对0点往右100px;-是负值就是相对0点往左100px;要想回到原位,可以用 =100px,-=100px;或者原始left为0;animate{"left":"100px"}后animate{"left":"0"}回到原位。

jquery怎么实现左右滑动的问题

<script>
$(document).ready(function(){
$("#hide").click(function(){
if($("#left").css(width) == 200px){
$("#left").animate({width:0},"slow")
$("#hide").val(显示)
}else{
$("#left").animate({width:200},"slow")
$("#hide").val(隐藏)
}
})
})
</script>

<div id="left" style="width:200px background-color:#009900 float:left"> </div>
<div id="right" style="width:400px background-color: #FF0000 float:left"> </div>
<div style="float:left">
<input id="hide" type="button" value="隐藏" />
</div>

最新文章