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