Jquery 滑入滑出效果实现代码

2016-02-19 13:18 94 1 收藏

下面图老师小编跟大家分享Jquery 滑入滑出效果实现代码，一起来学习下过程究竟如何进行吧！喜欢就赶紧收藏起来哦~

【 tulaoshi.com - Web开发】

CSS

代码如下：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
style type="text/css"
#divD{
width:300px;
height:100px;
background-color:#CC99FF;
}
/style

Jquery代码

代码如下：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
script type="text/javascript" src="bg/js/jquery-1.4.2.min.js"/script
script type="text/javascript"
$(document).ready(function(){
$("#btnFadein").bind("click",Fadein); //为btnFadein绑定click时间
$("#btnFadeout").bind("click",Fadeout); //为btnFadeout绑定click时间
})

function Fadein(){
$("#divD").slideDown("slow"); //滑入
}

function Fadeout(){
$("#divD").slideUp("slow"); //滑出
}
/script

HTML

代码如下：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
body
input type="button" value="滑入" /
input type="button" value="滑出"/
div这是div/div
DIV
/body

O(∩_∩)O每天进步一点点O(∩_∩)O 该BLOG供个人记录学习笔记，如有错误欢迎指出！

来源:http://www.tulaoshi.com/n/20160219/1603753.html

看过《Jquery 滑入滑出效果实现代码》的人还看了以下文章更多>>

jQuery插件 tabBox实现代码

标签： Web开发

打包下载查了一下jq的官方插件编写文档（ http://docs.jquery.com/Plugins/Authoring ）以及文档中推荐的Mike Alsup写的一篇 A Plugin Development Pattern 。英语不是很好，但还是努力看下来（既学习到知识又能练习英语，何乐不为），照猫画虎的写了一个处女作——tabBox。顾名思义，这个插件就是方便的产生具有tab选项卡功能“盒子...

jquery 锁定弹出层实现代码

标签： Web开发

基于jquery的锁定弹出层这个东西也是随手总结出来的，引用了一些js框架jquery的方法。 div遮盖其他控件的方法参考了对于需要遮盖flash的，请将flash控件的WMode变量值设置为Transparent 使用方法：代码如下： script src="jquery.js"/script script src="effect/maskDiv.js"/script script //配置模块 var moduleEvent = [{"i...

高仿网易新闻顶部滑动条效果实现代码

标签：编程语言网络编程

这个是网易新闻的主界面，我们知道底部可以用tabhost实现，这个很容易，我们在其他软件中也会经常用到。至于顶部的滑动条，个人感觉还是比较漂亮的所以今天也模仿了下，网易顶部滑动条的效果，由于初次模仿这种效果，可能有些地方还不够完美，不过基本已经实现，希望大家能够喜欢。废话不多说，下面上代码：首先是布局layout下的main.xm...

JQuery 网站换肤功能实现代码

标签： Web开发

从那以后，我找到了很多可以让访客通过鼠标点击某个地方切换样式表的方法。但最近我要写一篇如何使用jQuery编写简单代码实现它的教程。我将向你们逐步解说整个的过程，不仅仅因为要展示jQuery代码的简介，同时也要揭示jQuery库中的若干高级特性。首先，代码代码如下: $(document).ready(function() { $('.styleswitch').click(funct...

Jquery 弹出层插件实现代码

标签： Web开发

直接看代码：代码如下: %@ Page Language="C#" AutoEventWireup="true" CodeFile="Layer.aspx.cs" Inherits="Layer" % !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/title scri...

查看更多精彩>>