【jQuery小实例】---2自定义动画

---本系列文章所用使用js均可在本博客文件中找到

本节用jQuery完一个简易的动画效果，一个小驴跑跑的效果。和一个类似qq面板效果。大致也分为三步：添加jquery-1.8.3.js文件。这个是不可缺少的，以下文章都需要添加，下面不再一一强调。随后添加图片，写jQuery代码：

一，小驴跑跑

图片添加：

编写Jqery代码：

 $('#im').animate({ 'left': '490px', 'top': '250px' }).animate({ 'left': '1000px', 'top': '550px', 'width': '200px', 'height': '200px' }).animate({ 'left': '1200px', 'top': '190px', 'width': '60px', 'height': '80px' }).animate({ 'left': '0px', 'top':'0px' });

注释：调用animate方法，里面参数可以设置坐标，可以在移动过程设置图片大小

效果：

二，我的同学录

1，引用js代码

2，编写html文件并设置样式

 <div id="dv"><ul id="ul"><li>大学同学<ul><li>王永威</li><li>贺亚东</li><li>张文阳</li></ul></li><li>高中同学<ul><li>闫飞</li><li>小明</li><li>孟轲</li></ul></li><li>初中同学<ul><li>韩剑南</li><li>韩建北</li><li>韩亚红</li></ul></li></ul></div>

样式设置：

   <style type="text/css">#dv{width:150px;height:400px;border:1px solid black;}#ul{list-style-type:none;margin:0px;padding:0px;}#ul li{text-align:center;font-size:medium;color:White;cursor:pointer;border-bottom:3px solid grey;background-color:Orange;}#ul li ul{padding:0px;margin:0px;display:none;list-style-type:none;}#ul li ul li{font-size:medium;color:Black;background-color:White;text-align:left;}</style>

View Code

jQuery代码实现效果：

        $('#ul>li').click(function () {$('ul', $(this)).toggle(200);//$('ul', $(this)).show(200);$(this).siblings().children('ul').hide(200);})

效果图：

附录：显示，隐藏和显隐效果的jQuery代码

                $('#but1').click(function () {$('#dv').css('background-color','blue').show(1000);});$('#but2').click(function () {$('#dv').hide(1000);});$('#but3').click(function () {$('#dv').toggle(1000);});

转载于:https://www.cnblogs.com/baiboy/p/3153033.html

【jQuery小实例】---2自定义动画相关推荐

jQuery（五）--自定义动画、动画
目录一.自定义动画 1.1 animate() 1.2 animate()动画执行顺序 1.3 animate()动画回调函数和匀速运动 1.4 animate动画之stop()/delay() 二 ...
JQuery中的animate自定义动画
animate()方法用于创建自定义动画. 概述 .animate( properties [, duration ] [, easing ] [, complete ] ) propert ...
HTML5+CSS3+JS小实例：倒计时动画特效
实例:倒计时动画特效技术栈:HTML+CSS+JS 效果: 源码: [html] <!DOCTYPE html> <html><head><meta htt ...
HTML5+CSS3小实例：自定义滤镜实现液体加载动画
HTML5+CSS3搭配自定义滤镜做一个液体环形小球加载动画,七个小球绕环形旋转,设置有规律的动画延迟时间,使它们有序依次旋转,过程伴随溶球效果,这真是一个百看不腻的loading加载动画. 效果: ...
HTML5+CSS3+JQuery小实例：简单又令人惊艳的hover效果登录界面
今天给大家带来一个小案例,HTML5+CSS3+JQuery实现简单又令人惊艳的hover效果登录界面. 先看效果: 源代码: <div class="container"& ...
【jQuery小实例】---3 凤凰网首页图片动态效果
---本系列文章所用使用js均可在本博客文件中找到本页面实现类似于凤凰网首页,鼠标点击新闻,可以在div中显示新闻图片,点击军事显示军事图片的效果.采用的思路是:鼠标悬浮,显示当前div中的内容(图片 ...
ASP.NET jQuery 小实例（实现图片的放大缩小）
①Default.aspx文件 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...
网站建设中前端常用的jQuery+easing缓动的动画
网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...
微信小程序之自定义模态弹窗（带动画）实例
代码地址如下: http://www.demodashi.com/demo/13991.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...

【jQuery小实例】---2自定义动画

【jQuery小实例】---2自定义动画相关推荐

最新文章

热门文章