jQuery实现的卷帘门滑入滑出效果【案例】

本文实例讲述了jQuery实现的卷帘门滑入滑出效果。分享给大家供大家参考，具体如下：

效果:

如果用JQ来做,其实非常简单,核心代码:

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  //jq入口函数简写方法
/*  $(function ( ) {
  })*/
 //jq入口函数普通方式
$(document).ready(function ( ) {
  $('#flip').on('click',function ( ) {
    $('#content').slideToggle("slow");//slow是代表200ms的意思,normal是400,fast是600,不写默认normal
  })
})
</script>

完整的代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net jQuery滑入滑出</title>
  <style>
    #flip,#content {
      padding: 5px;
      text-align: center;
      background-color: #e5eecc;
      border: 1px solid #c3c3c3;
    }
    #content {
      padding: 100px;
      display: none;
    }
    #flip {
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="flip">点我,显示或隐藏面版</div>
<div id="content">hello world!</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  //jq入口函数简写方法
/*  $(function ( ) {
  })*/
 //jq入口函数普通方式
$(document).ready(function ( ) {
  $('#flip').on('click',function ( ) {
    $('#content').slideToggle("slow");//slow是代表200ms的意思,normal是400,fast是600,不写默认normal
  })
})
</script>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • 基于jQuery实现淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: <div id="container"> <ul class="pic"> <li><a href="javascript:;"><img src="DSC01627.jpg"

  • jQuery实现基本淡入淡出效果的方法详解

    jQuery实现基本淡入淡出效果的方法详解

    本文实例讲述了jQuery实现基本淡入淡出效果的方法.分享给大家供大家参考,具体如下: jQuery fadeIn()方法:用于淡入已隐藏的元素 jQuery fadeOut()方法:用于淡出可见的元素 <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script

  • jQuery实现的淡入淡出图片轮播效果示例

    jQuery实现的淡入淡出图片轮播效果示例

    本文实例讲述了jQuery实现的淡入淡出图片轮播效果.分享给大家供大家参考,具体如下: 1.HTML 框架搭建(css代码里宽高的大小与图片的大小一致) css部分: <style> * { padding: 0; margin:0; } ul { list-style: none; } .out { width: 640px; height: 270px; margin:50px auto; position: relative; } .out img{ width: 640px; heig

  • 基于Jquery实现焦点图淡出淡入效果

    基于Jquery实现焦点图淡出淡入效果

    本文实例讲述了基于Jquery实现焦点图淡出淡入效果代码.分享给大家供大家参考.具体如下: 这个容器用了百分比宽度,图片始终保持居中处理,定宽或者自适应宽度都是可以的. 兼容到IE6+以上浏览器,有淡出淡入速度和切换间隔两个参数可以改. 运行效果截图如下: 具体代码如下: Html代码如下: <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8">

  • jQuery实现图片文字淡入淡出效果

    jQuery实现图片文字淡入淡出效果

    本实例主要讲解了jquery仿新浪微博图片文字列表上下淡进淡出间歇上下滚动效果,分享给大家供大家参考,具体内容如下 1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行. 3.

  • Jquery 滑入滑出效果实现代码

    CSS 复制代码 代码如下: <style type="text/css"> #divD{ width:300px; height:100px; background-color:#CC99FF; } </style> Jquery代码 复制代码 代码如下: <script type="text/javascript" src="bg/js/jquery-1.4.2.min.js"></script>

  • 原生js和jQuery实现淡入淡出轮播效果

    本文实例为大家介绍了基于jQuery实现淡入淡出轮播效果的关键代码,分享给大家供大家参考,具体内容如下: 基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果. html代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一个轮播&l

  • jQuery实现淡入淡出的模态框

    本文实例为大家总结了jQuery淡入淡出模态框的使用方法,供大家参考,具体内容如下 HTML代码如下:固定格式就省略了 <div class="theme-popover"> <div class="theme-poptit"> <a href="#" rel="external nofollow" class="close">×</a> <h3>

  • jQuery实现的淡入淡出与滑入滑出效果示例

    jQuery实现的淡入淡出与滑入滑出效果示例

    本文实例讲述了jQuery实现的淡入淡出与滑入滑出效果.分享给大家供大家参考,具体如下: 1. 淡入淡出效果: 我们做这样一个实例: 有两个按钮,点击淡入,有一个div层淡入,点击淡出,div层淡出: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery淡入淡出</title> <style> .d

  • jQuery实现的卷帘门滑入滑出效果【案例】

    jQuery实现的卷帘门滑入滑出效果【案例】

    本文实例讲述了jQuery实现的卷帘门滑入滑出效果.分享给大家供大家参考,具体如下: 效果: 如果用JQ来做,其实非常简单,核心代码: <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> //jq入口函数简写方法 /* $(function ( ) { })*/ //jq入口函数普通方式 $(document).ready(function

  • vue 路由切换过渡动效滑入滑出效果的实例代码

    vue 路由切换过渡动效滑入滑出效果的实例代码

    效果展示 css 滑入和滑出的动画 .twofade-enter {transform: translateX(100%);} .twofade-enter-active {transition: all 0.3s;position: absolute;height:100%;background:#ececec;} .twofade-leave-active {transition: all 0;transition-delay: 0.3s;position: absolute;} .twof

  • jquery鼠标悬停导航下划线滑出效果

    本文实例为大家分享了jquery鼠标悬停导航下划线滑出效果的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery鼠标悬停导航下划线滑出效果</title> <style> *{ margin:0; padding:0; list-style:none;} img{ border:0;} .

  • jquery实现像栅栏一样左右滑出式二级菜单效果代码

    jquery实现像栅栏一样左右滑出式二级菜单效果代码

    本文实例讲述了jquery实现像栅栏一样左右滑出式二级菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了jquery实现像栅栏一样的左右滑出式二级菜单,会向左或向右滑出,支持中英文,使用时别忘了引入jquery插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-right-show-nav-menu-codes/ 具体代码如下: <!DOCTYPE html> <head> <meta ht

  • 调用jQuery滑出效果时闪烁的解决方法

    问题现象如题所示,在调用jQuery 滑出效果时,层会现次闪烁一下.在网上找了许多解决文案,说要加如下标示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 可问题是现在的 标题头已 为 html4.0 ,如若改为上面的情况,则页面会乱掉.

  • jQuery实现仿腾讯微博滑出效果报告每日天气的方法

    本文实例讲述了jQuery实现仿腾讯微博滑出效果报告每日天气的方法.分享给大家供大家参考.具体分析如下: 这是仿腾讯微博滑出效果的每日天气代码,鼠标放上去,天气内容将从左向右滑出来,像开抽屉一样,本动画效果流畅,当然少不了jQuery的功劳,本代码使用了1.6.2版本的jQuery插件来实现这一功能. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

  • JQUERY实现左侧TIPS滑进滑出效果示例

    JQUERY实现左侧TIPS滑进滑出效果示例

    左侧提示 滑进滑出 平滑效果,各位童鞋如果遇到类似效果可以应用:  JQUERY代码: 复制代码 代码如下: //左侧浮动 $(".reading").hover( function(){ $(this).animate({left:"50"}); $(".read").animate({left:"0"},600); }); $(".read_close").click( function(){ $(&q

  • 使用jquery实现鼠标滑过弹出更多相关信息层附源码下载

    使用jquery实现鼠标滑过弹出更多相关信息层附源码下载

    当要在有限的空间展示更多的信息时,我们经常会采取鼠标滑过弹出更多相关信息层,提高互动性.尤其可以应用在公司照片墙.招聘网站求职者信息展示等等场景. 本文结合实例和大家分享下使用jQuery实现滑过图片展示信息效果.当鼠标滑向照片时,会弹出对应的照片的详细介绍信息,请看演示效果: 效果展示     源码下载 HTML 首先我们准备页面素材,页面上由多组图片<li>密集组成,同时有图片对应的相关说明信息,用于展示详细信息效果. <div class="demo">

随机推荐