微客导航 » 文章资讯 » JQuery animate动画应用示例

JQuery animate动画应用示例

2023-08-23 13:26:04 177

本文实例讲述了JQueryanimate动画。分享给大家供大家参考，具体如下：

滑动选项卡





Title

.btnsinput{
width:100px;
height:40px;
background-color:grey;
border:0;
}
.btns.current{
background-color:gold;
}
.cons.slidesdiv{
width:500px;
height:300px;
background-color:gold;
/*display:none;!*整体都不显示了*!*/
text-align:center;
line-height:300px;
font-size:30px;
float:left;/*把三个div由隐藏改为浮动*/
}
.cons{
width:500px;
height:300px;
overflow:hidden;/*超过cons的slide隐藏*/
position:relative;/*相对于slide绝对定位*/
}
.slides{
width:1500px;
height:300px;/*把slide加长*/
position:absolute;/*相对于cons相对定位*/
}
.cons.active{
display:block;
}



$(function(){
var$btn=$('.btnsinput');
var$slides=$('.cons.slides');
//alert($btn.length);
//alert($div.length);
$btn.click(function(){
//我点击哪一个按钮，$(this)就指的是谁,而this
//指的是原生的，$（this）指的是JQuery的
//$(this).siblings().removeClass('current');
//$(this).addClass('current');//可以用链式调用
$(this).addClass('current').siblings().removeClass('current');
//varnum=$(this).index();
//$div.eq($(this).index()).addClass('active').sibling().removeClass('active');
$slides.animate({left:(-500*$(this).index())});
})
})

选项卡1的内容

选项卡2的内容

选项卡3的内容

将slides下面的div由隐藏改为浮动，将cons设置成绝对定位，将slides改为相对定位。超过cons的slides隐藏。
点击事件发生之后，相对定位改变。

animate动画

$div=$('#div1');
$div.animate({
width:300,
height:300
},1000,'swing',function(){
alert('done');
})





Title


$(function(){
$box=$('.box');
$box.animate({
width:300,
height:300
},1000,'swing',function(){
alert('done');
})
})


.box{
width:100px;
height:100px;
background-color:gold;
}

用animate动画改变box大小，完成之后用回调函数弹出done

感兴趣的朋友可以使用如下工具测试上述代码运行效果：

在线HTML/CSS/JavaScript代码运行工具：
http://tools.jb51.net/code/HtmlJsRun

在线HTML/CSS/JavaScript前端代码调试运行工具：
http://tools.jb51.net/code/WebCodeRun

更多关于jQuery相关内容还可查看本站专题：《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

JQuery animate动画应用示例

热门推荐

随机推荐