快捷導(dǎo)航

jQuery實(shí)現(xiàn)左右滑動(dòng)的toggle方法

更新時(shí)間：2018年03月03日 10:39:04 作者：Yu丶

下面小編就為大家分享一篇jQuery實(shí)現(xiàn)左右滑動(dòng)的toggle方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

我們知道使用 jQuery 來實(shí)現(xiàn)上下移入移除，可以直接使用 slideUp() 和 slideDown() 方法。

slideUp()方法和slideDown()方法只會(huì)改變?cè)氐母叨?。如果一個(gè)元素的 display 屬性值為 “none”，當(dāng)調(diào)用 slideDown() 方法時(shí)，這個(gè)元素將由上至下延伸顯示。slideUp()方法正好相反，元素將由上到下縮短隱藏。

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>toggle-jquery1.9</title>
 <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
 <style>
  div.container {
   height: 320px;
   border: 1px solid #ccc;
  }
  div.left {
   width: 200px;
   height: 300px;
   background-color: #36f;
  }
 </style>
</head>
<body>
 <div class="container">
  <div class="left"></div>
 </div>
 <button id="toggle">toggle</button>
 <script>
  $(document).ready(function(){
   $('#toggle').click(function(){
    $('.left').slideToggle(300);
   });
  });
 </script>
</body>
</html>

那么，要實(shí)現(xiàn)左右的滑入滑出呢？

demo 如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>toggle-jquery1.9</title>
 <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
 <style>
  div.container {
   height: 320px;
   border: 1px solid #ccc;
  }
  div.left {
   width: 200px;
   height: 300px;
   background-color: #36f;
  }
 </style>
</head>
<body>
 <div class="container">
  <div class="left"></div>
 </div>
 <button id="toggle">toggle</button>
 <script>
  $(document).ready(function(){
   $('#toggle').click(function(){
    $('.left').animate({width:'toggle'},350);
   });
  });
 </script>
</body>
</html>

效果如下：

以上這篇jQuery實(shí)現(xiàn)左右滑動(dòng)的toggle方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jquery實(shí)現(xiàn)淡入淡出輪播圖效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)淡入淡出輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
jQuery.query.js 取參數(shù)的兩點(diǎn)問題分析
最近在項(xiàng)目中使用jQuery.query.js這個(gè)插件進(jìn)行頁面間URL傳值，遇到如下兩點(diǎn)問題
2012-08-08
jquery常用的12個(gè)小功能
12個(gè)jquery常用功能，極好的，分享給大家，幫助大家更好的進(jìn)行jQuery開發(fā)，感興趣的小伙伴們可以參考一下
2016-07-07
基于jQuery的獲取標(biāo)簽名的代碼
這里獲得標(biāo)簽名為大寫，如:A , DIV，需要的朋友可以參考下
2012-07-07
Jquery實(shí)現(xiàn)控件的隱藏和顯示實(shí)例
本篇文章主要是對(duì)Jquery實(shí)現(xiàn)控件的隱藏和顯示實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
jQuery Validate 數(shù)組全部驗(yàn)證問題
這篇文章主要介紹了jquery validate 數(shù)組全部驗(yàn)證問題及解決辦法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-01-01
jQuery Mobile框架中的表單組件基礎(chǔ)使用教程
jQuery Mobile框架主要針對(duì)移動(dòng)端的Web UI設(shè)計(jì),其中豐富的表單組件調(diào)用起來也是相當(dāng)方便,接下來就為大家整理了一份jQuery Mobile框架中的表單組件基礎(chǔ)使用教程,需要的朋友可以參考下
2016-05-05
jquery 分頁控件實(shí)現(xiàn)代碼
花了幾個(gè)小時(shí)用jqury寫的分頁效果實(shí)現(xiàn)，功能基本實(shí)現(xiàn)需要再封裝下呵呵～～
2009-11-11
整理8個(gè)很棒的 jQuery 倒計(jì)時(shí)插件和教程
jQuery 是最流行也是使用最廣泛的 JavaScript 框架，它簡(jiǎn)化了 HTML 文檔操作，事件處理，動(dòng)畫效果和 Ajax 交互。下面向大家分享8個(gè)優(yōu)秀的 jQuery 倒計(jì)時(shí)插件和教程
2011-12-12
jQuery 點(diǎn)擊圖片跳轉(zhuǎn)上一張或下一張功能的實(shí)現(xiàn)代碼
jQuery獲取當(dāng)前鼠標(biāo)相對(duì)位置坐標(biāo)和點(diǎn)擊圖片跳轉(zhuǎn)上一張或下一張功能
2010-03-03