animate实现动画效果

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--<script src="../../JQuery/jquery-2.1.4.min.js"></script>-->
    <script src="../../JQuery/jquery-1.4.2.min.js"></script>
    <link href="../../CSS/2-7.css" rel="stylesheet" />
    <title>使用animate实现动画效果</title>
    <script type="text/javascript">

        $(function () {
            $("#btn").click(function () {
                $("#box").animate({ height: "500px" }); //此方法操作div,可以使div样式不会还原,操作span则会在动画效果完成后还原之前样式。
            }
            )
            $(".btn1").click(function () {
                $("#box").animate({ height: "300px" }); //此方法操作div,可以使div样式不会还原,操作span则会在动画效果完成后还原之前样式。
            }
       )
        })
    </script>
</head>
<body>
    <div>
        <span id="spnMove">Span Move</span>
    </div>
    <div id="box" style="background: #98bf21; height: 100px; width: 100px; margin: 6px;"></div>
    <button class="btn1">Animate</button>
    <input type="button" id="btn" value="animate" />
</body>
</html>
时间: 2024-10-30 12:26:50

animate实现动画效果的相关文章

jQuery之动画效果show()......animate()

jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数.   show(speed,[easing],callback) Number/String easing默认是swing,可选linear; $("#div1&qu

CSS--使用Animate.css制作动画效果

一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <style> 7 /* Animate.css GitHu

jquery动画效果 animate详解

animate(params,[speed],[easing],[fn]) $(selector).animate(styles,speed,easing,callback) 参数 styles 必需.规定产生动画效果的 CSS 样式和值.可能的 CSS 样式值(提供实例):backgroundPositionborderWidthborderBottomWidthborderLeftWidthborderRightWidthborderTopWidthborderSpacingmarginma

jQuery animate()动画效果

1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params 参数定义形成动画的 CSS 属性: //可选的 speed 参数规定效果的时长,它可以取以下值:"slow"."fast" 或毫秒: //可选的 callback 参数是动画完成后所执行的函数名称: 下面为几个实例: $("button").clic

jQuery动画效果animate和scrollTop结合使用实例

CSS属性值是逐渐改变的,这样就可以创建动画效果. 只有数字值可创建动画(比如 "margin:30px"). 字符串值无法创建动画(比如 "background-color:red"). 复制代码 代码如下: $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 上面的代码表示滚动条跳到0的位置,页面移动速度是800. 结合scrollTop实用示例: 复制

66种基于animate.css的CSS消息提示动画效果

这是一款基于animate.css的效果非常酷的CSS消息提示动画效果.这66种CSS消息提示动画效果按出现位置分为4种类型:上部.中部.中下和右下.每个部位的消息提示效果都是不一样的. 注意:这个CSS消息提示动画效果需要在支持CSS3的浏览器中才能正常工作. 在线演示:http://www.htmleaf.com/Demo/201503061471.html 下载地址:http://www.htmleaf.com/css3/css3donghua/201503061470.html

animate.css 一些常用的CSS3动画效果

大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:http://daneden.me/animate/ 自定义下载样式:http://daneden.me/animate/build/ git地址:https://github.com/daneden/animate.css

使用animate()完成修改图片src切换图片的动画效果

如下所示,在动画效果中的回调函数中进行src的修改和动画的切换 $(".TopImg").animate( {opacity:'toggle'}, "slow", null, function(){ $(".TopImg").attr("src","../images/2.jpg"); $(".TopImg").animate({opacity:'toggle'},"slow&

Animate.css+js实现鼠标经过动画效果

动画效果可以参照animate.css 注:图片默认是不动的,当鼠标经过的时候才会动.原理很简单--通过js,添加鼠标经过事件,鼠标经过时,把当前元素存放在"data-in"里的"swing"添加到class里,前提animated这个类一定要加上,要不然动画不起作用. 1.引入animate.css <link href="https://cdn.bootcss.com/animate.css/3.5.1/animate.min.css"