jQuery實(shí)現(xiàn)左右滑動的toggle方法
更新時(shí)間：2018年03月03日 10:39:04 作者：Yu丶
下面小編就為大家分享一篇jQuery實(shí)現(xiàn)左右滑動的toggle方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
我們知道使用 jQuery 來實(shí)現(xiàn)上下移入移除，可以直接使用 slideUp() 和 slideDown() 方法。
slideUp()方法和slideDown()方法只會改變元素的高度。如果一個(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)左右滑動的toggle方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guā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
12個(gè)jquery常用功能，極好的，分享給大家，幫助大家更好的進(jìn)行jQuery開發(fā)，感興趣的小伙伴們可以參考一下2016-07-07
這里獲得標(biāo)簽名為大寫，如:A , DIV，需要的朋友可以參考下2012-07-07
Jquery實(shí)現(xiàn)控件的隱藏和顯示實(shí)例
本篇文章主要是對Jquery實(shí)現(xiàn)控件的隱藏和顯示實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
jQuery Validate 數(shù)組 全部驗(yàn)證問題
這篇文章主要介紹了jquery validate 數(shù)組 全部驗(yàn)證問題及解決辦法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-01-01
jQuery Mobile框架中的表單組件基礎(chǔ)使用教程
jQuery Mobile框架主要針對移動端的Web UI設(shè)計(jì),其中豐富的表單組件調(diào)用起來也是相當(dāng)方便,接下來就為大家整理了一份jQuery Mobile框架中的表單組件基礎(chǔ)使用教程,需要的朋友可以參考下2016-05-05
花了幾個(gè)小時(shí)用jqury寫的分頁效果實(shí)現(xiàn)，功能基本實(shí)現(xiàn)需要再封裝下 呵呵～～2009-11-11
整理8個(gè)很棒的 jQuery 倒計(jì)時(shí)插件和教程
jQuery 是最流行也是使用最廣泛的 JavaScript 框架，它簡化了 HTML 文檔操作，事件處理，動畫效果和 Ajax 交互。下面向大家分享8個(gè)優(yōu)秀的 jQuery 倒計(jì)時(shí)插件和教程2011-12-12
jQuery 點(diǎn)擊圖片跳轉(zhuǎn)上一張或下一張功能的實(shí)現(xiàn)代碼
jQuery獲取當(dāng)前鼠標(biāo)相對位置坐標(biāo)和點(diǎn)擊圖片跳轉(zhuǎn)上一張或下一張功能2010-03-03