jquery (show,fadeOut,Animate)简单效果

2016-02-19 14:37 17 1 收藏

今天图老师小编要向大家分享个jquery (show,fadeOut,Animate)简单效果教程，过程简单易学，相信聪明的你一定能轻松get！

【 tulaoshi.com - Web开发】

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head titlejquery/title style type="text/css"!-- #spanel,#showHide,#fadeout { width:200px; height:100px; background-color:Aqua; position:relative; cursor:pointer; font-size:12px; } --/style script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"/script script type="text/javascript"!-- $(function(){ //用toggle,hide(),show()实现显示与隐藏 $("#showHide").toggle(function(){ $(this).hide(600) },function() { $(this).show(600); } ); //使用fadeout,fadeIn改变透明度 $("#fadeout").toggle(function(){ $(this).fadeOut(); },function() { $(this).fadeIn(); } ); //使用animate实现简单的动画效果 $("#spanel").bind("click",function(){ $(this).animate({left:"300px",height:"100px"},3000); }); }); // --/script /head body div id="showHide"show移上去看看/div p/p div id="spanel" h5hello/h5 /div p/p div id="fadeout"fadeout淡出效果 淡出效果淡出效果淡出效果淡出效果淡出效果 淡出效果淡出效果淡出效果淡出效果 /div /body /html

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

来源:https://www.tulaoshi.com/n/20160219/1607371.html

上一篇： jquery 可排列的表实现代码
下一篇： jQuery checkbox全选/取消全选实现代码

看过《jquery (show,fadeOut,Animate)简单效果》的人还看了以下文章更多>>

初试jQuery EasyUI 使用介绍

标签： Web开发

打包下载 jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，d...

jQuery DIV弹出效果实现代码

标签： Web开发

先上个效果图，可以点击Close按钮或是在遮罩层上任意处点击，就可以关闭弹出层。 HTML代码代码如下: div id='pop-div' style="width: 300px" class="pop-box" h4标题位置/h4 div class="pop-box-body" p 正文内容 /p /div div class='buttonPanel' style="text-align: right" style="text-align: right" input value="Close"...

jquery 弹出公告功能代码

标签： Web开发

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=gb2312" / titlejquery 弹出公告/title script type="text/javascript" src="http://ajax.googleapi...

jQuery TextBox自动完成条

标签： Web开发

代码如下：代码如下: %@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" % !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head runat="server" title无标题页/...

jQuery 练习[一] 学习jquery的准备工作

标签： Web开发

使用 jQuery 写 JavaScript 脚本就像是用 Delphi 写 Windows 程序一样, 它不是更强大, 只是更易用. 计划先全面浏览、测试一遍 jQuery 的语法, 同时洞察其逻辑与思想; 最后尝试在 Delphi 中使用 jQuery, 估计要比使用 MSHTML.pas 方便得多. 官方站点: http://jquery.com/ 中文文档: http://jquery-api-zh-cn.googlecode.com/ 下载地址: http:/...

查看更多精彩>>