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

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

1. 淡入淡出效果：

我们做这样一个实例：

有两个按钮，点击淡入，有一个div层淡入，点击淡出，div层淡出：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>www.jb51.net jQuery淡入淡出</title>
    <style>
      .div{width: 300px;height: 300px;background-color: red;display: none;}
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
      $(function(){
        $("#btn").click(function(){
          $(".div").fadeIn();
        });
        $("#btna").click(function(){
          $(".div").fadeOut();
        });
      });
    </script>
  </head>
  <body>
     <input type="button" id="btn" value="点击淡入"/>
     <input type="button" id="btna" value="点击淡出"/>
     <div class="div">
      我是一个div块哦！！！！！
     </div>
  </body>
</html>

运行效果：

2. 滑入滑出效果：

我们做这样一个实例：

有两个按钮，点击滑入，有一个div层滑入，点击滑出，div层滑出：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>www.jb51.net jQuery滑入滑出</title>
    <style>
      .div{width: 300px;height: 300px;background-color: green;display: none;}
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
      $(function(){
        $("#btn").click(function(){
          $(".div").slideDown();
        });
        $("#btna").click(function(){
          $(".div").slideUp();
        });
      });
    </script>
  </head>
  <body>
     <input type="button" id="btn" value="点击滑入"/>
     <input type="button" id="btna" value="点击滑出"/>
     <div class="div">
      我是一个div块哦！！！！！
     </div>
  </body>
</html>

运行效果：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

赞 (0)

相关推荐

  • 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

  • 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 滑入滑出效果实现代码

    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>

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

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

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

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

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

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

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

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

  • 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实现淡入淡出效果轮播图

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

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

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

  • 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实现的淡入淡出二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款加入了jQuery的菜单,一个看似平凡菜单突然有味道.有生机起来,这里将jQuery1.3.2引用进来,让弹出的二级菜单具备淡入淡出的效果,虽然就效果本身来说并不起眼,但比起无任何效果的菜单,从体验上来说,已经强了很多倍. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-out-2l-nav-menu-codes/ 具

  • jquery实现的淡入淡出下拉菜单效果

    jquery实现的淡入淡出下拉菜单效果

    本文实例讲述了jquery实现的淡入淡出下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款jQuery带有淡入淡出效果的下拉菜单,可作为一个下拉导航菜单的模板,移动鼠标到一级主菜单上看一看,在有包括二级子菜单的菜单项上悬停时,二级菜单渐变显示出来,兼容性也是很不错的,希望大家喜欢哈. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-style-codes/ 具体代码如下: <!DOCTYPE

  • 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实现左侧TIPS滑进滑出效果示例

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

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

  • jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】

    jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】

    本文实例讲述了jQuery插件FusionCharts实现的3D帕累托图效果.分享给大家供大家参考,具体如下: 1.设计3D帕累托图的页面 index.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equi

随机推荐