实例1，需要引用jquery-ui.js

<!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=utf-8" />

<title>无标题文档</title>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script type="text/javascript" src="jquery-ui-1.12.1/jquery-ui.js"></script>

<script type="text/javascript">

    jQuery.fn.extend({

      slideRightShow: function() {

        return this.each(function() {

            $(this).show('slide', {direction: 'right'}, 1000);

        });

      },

      slideLeftHide: function() {

        return this.each(function() {

          $(this).hide('slide', {direction: 'left'}, 1000);

        });

      },

      slideRightHide: function() {

        return this.each(function() {

          $(this).hide('slide', {direction: 'right'}, 1000);

        });

      },

      slideLeftShow: function() {

        return this.each(function() {

          $(this).show('slide', {direction: 'left'}, 1000);

        });

      }

    });

    $(function(){

        $("body").on("click","a#show",function(){

            $("#test").slideRightShow();

        });

        $("body").on("click","a#hide",function(){

            $("#test").slideRightHide();

        });

    });

</script>

</head>

<body>

<div id="test" style="position:absolute;">asdfasdf</div>

<br />

<a href="javascript:void(0)" id="show">显示</a>

<a href="javascript:void(0)" id="hide">隐藏</a>

</body>

</html>

实例二：

<html>

<head>

<script type="text/javascript" src="jquery-1.8.2.js"></script>

<script type="text/javascript">

    jQuery.fn.slideLeftHide = function( speed, callback ) {

        this.animate({

            width : "hide",

            paddingLeft : "hide",

            paddingRight : "hide",

            marginLeft : "hide",

            marginRight : "hide"

        }, speed, callback );

    };

    jQuery.fn.slideLeftShow = function( speed, callback ) {

        this.animate({

            width : "show",

            paddingLeft : "show",

            paddingRight : "show",

            marginLeft : "show",

            marginRight : "show"

        }, speed, callback );

    };

</script>

<script type="text/javascript">

    $(function() {

        $(".title_bar").slideLeftHide(4000);

        $(".title_bar").slideLeftShow(4000);

    });

</script>  

</head>

<body>  

    <div class="title_bar">

    asdfasfasdfas

    </div>

</body>

</html>

两个完整的jquery slide多方面滑动效果实例的更多相关文章

  1. Jquery Mobile左右滑动效果

    首先在一个页面里面定义两个< div data-role="page">,这里为了突出重点,就没有写出footer和header.定义的页面如下: <body&g ...

  2. 8.jQuery之上下滑动效果

    上下滑动:slideDown   slideUp  slideToggle <style> div { width: 150px; height: 300px; background-co ...

  3. jquery的slideUp、slideDown、slideToggle等涉及滑动效果的一系列函数，在IE浏览器下有几处bug

    jquery的slideUp.slideDown.slideToggle等涉及滑动效果的一系列函数,在IE浏览器下有几处bug: 1. 因position引起的问题 影响:IE全系列 症状:在需要sl ...

  4. jquery mobile左右滑动切换页面

    jquery mobile左右滑动切换页面 $(function() {$("body").bind('swiperight', function() {  $.mobile.ch ...

  5. spring cloud和spring boot两个完整项目

    spring cloud和spring boot两个完整项目 spring cloud 是基于Spring Cloud的云分布式后台管理系统架构,核心技术采用Eureka.Fegin.Ribbon.Z ...

  6. js进阶 13-2 jquery动画滑动效果哪些注意事项

    js进阶 13-2 jquery动画滑动效果哪些注意事项 一.总结 一句话总结:滑动里面这里up是隐藏,down是显示. 1.jquery动画默认的两个切换效果是什么(swing默认和linear的区 ...

  7. Jquery实现特效滑动菜单栏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  9. jquery左右滑动效果的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Linux下Kafka单机安装配置

    安装jdkJDK版本大于1.8 安装kafkatar -zxvf kafka_2.11-0.10.2.1.tgz mv kafka_2.11-0.10.2.1 /usr/local/kafka 配置k ...

  2. hdu 6243,6247

    题意:n只狗,n个笼子,每个笼子只能有一只,求不在自己笼子的狗的数量的期望. 分析:概率是相等的,可以直接用方案数代替,k 不在自己的笼子的方案数是 n!- (n-1)!,这样的k有n个,总的方案数n ...

  3. 可持久化线段树（主席树）快速简洁教程 图文并茂 保证学会。kth number例题

    如果学不会也不要打我. 假设你会线段树 开始! --- 主席树也叫可持久化线段树 顾名思义,它能够保存线段树在每个时刻的版本. 什么叫每个时刻的版本?你可能对一棵普通线段树进行各种修改,这每种样子就是 ...

  4. 查看flash的版本

    查看当前浏览器的flash版本: http://www.adobe.com/swf/software/flash/about/flashAbout_info_small.swf 针对谷歌浏览器 chr ...

  5. Html 中阻止事件冒泡的三种方法比较

    A:return false --->In event handler ,prevents default behavior and event bubbing .         return ...

  6. Dapper.net ORM

    参考链接:https://github.com/StackExchange/dapper-dot-net Dapper - a simple object mapper for .Net Dapper ...

  7. C# Pascal 命名规则

    在以前版本的Visual Studio中,微软曾建议使用匈牙利命名法来写代码,并鼓励开发这位写出统一格式的代码而使用相同的法则.在最近发布的.NET和它的编程语言中,微软更换了他的这一法则.如果你用过 ...

  8. JavaScript：改变 HTML 样式

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. Python基础—08-函数使用（02）

    函数使用 生成器 使用场景: 在使用列表时,很多时候我们都不会一下子使用全部的数据,通常都是一个一个使用,但是数据量较小的时候,对于内存的占用可以不用过于关心:但是当数据量较大时,就会出现内存使用突然 ...

  10. Java实现批量修改文件名，重命名

    平时下载的文件.视频很多都会有网址前缀,比如一些编程的教学视频,被人共享出来后,所有视频都加上一串长长的网址,看到就烦,所以一般会重命名后看,舒服很多,好了,不多说,直接上代码: 以下代码演示使用递归 ...