jQuery |动画

作者: 明明德撩码 | 来源:发表于2017-12-23 16:12 被阅读5次

利用jQuery ,自己动手做动画。
使用jQuery 的animate() 方法,制作动画。

语法:

$(selector).animate({params},speed,callback);
必需params 参数定义形成动画的 CSS 属性
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

实例:它把 <div> 元素往右边移动了 250 像素:

$("button").click(function(){
$("div").animate({left:'250px'});
});
left:属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移
padding:设置一个元素的填充
尝试一下 »

animate() - 操作多个属性

生成动画的过程中可同时使用多个属性:
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
尝试一下 »

animate() - 使用相对值

定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=

$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
height:'+=150px':表示height=height+150,给当前div高度+150px像素
尝试一下 »

相关文章

  • jquery动画和循环

    jquery特殊效果 jquery动画 jquery循环

  • jQuery特殊效果

    jQuery特殊效果 jQuery动画

  • jQuery 效果

    目录 jQuery 隐藏/显示jQuery 淡入淡出jQuery 滑动jQuery 动画jQuery Callba...

  • JQuery动画,事件

    jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。 语法...

  • jQuery动画、循环

    1、jQuery特殊效果 2、jQuery动画 3、jQuery循环

  • JS-17day

    1、jQuery特殊效果 2、jQuery动画 3、jQuery循环

  • JQuery:动画

    jquery动画:

  • jQuery动画

    jQuery动画

  • jQuery动画队列

    jQuery 动画队列 当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就...

  • jquery实战

    jQuery属性操作 jQuery特殊效果 jQuery动画 jQuery循环 jQuery其他事件 自定义事件

网友评论

    本文标题:jQuery |动画

    本文链接:https://www.haomeiwen.com/subject/yllqgxtx.html