animate 實現滑動切換效果

今天和大家分享一下用?animate 實現滑動切換效果的小例子 -------?來自<一只有夢想的前端小白>


?

大家都知道jQuery 提供的有一下幾種方法能夠實現滑動效果:

  1. slideDown()
  2. slideUp()
  3. slideToggle()

但是以上的滑動不太方便控制其滑動的方向,所以我們還是自己動手寫一個吧。。。

其代碼如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><style type="text/css">body{width: 100%;height: auto;}.content{width: 150px;height: 50px;position: absolute;top: 20px;left: 20px;overflow: hidden;background-color: red;}.slide-box{width: 300px;position: relative;overflow: hidden;}.slide1{width: 150px;height: 50px;float: left;display: inline-block;line-height: 50px;text-align: center;background-color: #BDD8CF;}.slide2{width: 150px;height: 50px;float: right;display: inline-block;line-height: 50px;text-align: center;background-color: #C1C4C4;}</style></head><body><div class="content"><div class="slide-box"><span class="slide1">左邊的元素</span><span class="slide2">右邊的元素</span></div></div><script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$(".content").hover(function(){$(".slide-box").stop(true).animate({right:"150px"},'slow');},function(){$(".slide-box").stop(true).animate({right:"0"},'slow');});})</script></body>
</html>

?

?

以上代碼即可以實現一個完整的滑動效果。但是有一點需要注意,

?

?

如上圖所示,需要加上 stop() 事件 ,防止鼠標快速移動時產生的多個事件,形成一個棧隊,造成鼠標移除后依舊滑動甚至閃動的效果。


?

希望以上的介紹對您能有所幫助,同時這也是我自己只是內化的過程,感謝博客園平臺!----來自<一只有夢想的前端小白>

轉載于:https://www.cnblogs.com/Lily-nercel/p/5461201.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/287872.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/287872.shtml
英文地址,請注明出處:http://en.pswp.cn/news/287872.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

[不一樣的依賴注入]通過遞歸實現容器里依賴注入

遞歸實現依賴注入創建所需的依賴服務類1public class Test2{3 public void PrintTest()4 {5 Console.WriteLine("Hello World");6 }7}89public class Test2 10{ 11 private readonly Test _test; 12 13 public Test2(Test test) 14 { 15 …

ArcGIS實驗教程——實驗十七:緩沖區分析(Buffer Analysis)

ArcGIS實驗視頻教程合集:《ArcGIS實驗教程從入門到精通》(附配套實驗數據) 【實驗描述】 緩沖區(Buffer)是為了識別某一地理實體對周圍地物的影響而在其周圍建立的一定寬度多邊形區域,緩沖區分析(Buffer Analysis)是用來確定不同地理要素的空間臨近性或接近程度的一種分…

Java之jdk和CGLib實現動態代理

1 jdk實現動態代理源碼實現 這里需要用到InvocationHandler接口 public interface Hello {public void sayHello(); } public class HelloImpl implements Hello {Overridepublic void sayHello() {System.out.println("hello word");} }import java.lang.reflect…

從Visual Studio中生成Linux設備

本文講的是從Visual Studio中生成Linux設備&#xff0c;【IT168 云計算頻道】近日Novell發布了SUSE Studio&#xff1a;一個用于創建Linux設備&#xff08;appliance&#xff09;的工具。與此同時&#xff0c;Mono小組創建了一個插件以從Visual Studio中生成支持SUSE的設備。 …

C++入門指南及實戰 第二步 HelloWorld及擴展詳解

回顧 在上一節中&#xff0c;我們編寫了如下代碼&#xff0c;完成了 HelloWorld程序的編寫&#xff1a; #include<iostream> using namespace std;int main(){cout <<"Hello World";return 0; }本小節將會對該代碼進行講解&#xff0c;并且解釋一下專業…

2560x1600分辨率高嗎_做設計還弄不清分辨率和像素之間的關系,來了解下他們是怎么換算...

許多同學都在問我關于像素的問題&#xff0c;為什么印刷時要300分辨率以上&#xff1f;網頁為什么72就夠了&#xff1f;做戶外噴繪30&#xff0c;甚至巨幅畫面20就上了。關于這些還是很多人不知道的&#xff0c;要不也不會被賣手機的忽悠&#xff0c;各大手機推銷員拿著手機大聲…

使用 fixture 機制重構 appium_helloworld

一、前置說明 在 pytest 基礎講解 章節,介紹了 pytest 的特性和基本用法,現在我們可以使用 pytest 的一些機制,來重構 appium_helloworld 。 appium_helloworld 鏈接: 編寫第一個APP自動化腳本 appium_helloworld ,將腳本跑起來 代碼目錄結構: pytest.ini 設置: [pyt…

linux程序調試命令strace

strace命令用法詳解: strace常用來跟蹤進程執行時的系統調用和所接收的信號。 在Linux世界&#xff0c;進程不能直接訪問硬件設備&#xff0c;當進程需要訪問硬件設備(比如讀取磁盤文件&#xff0c;接收網絡數據等等)時&#xff0c;必須由用戶態模式切換至內核態模式&#xff0…

Tomcat相關 -- 內存設置

java內存溢出詳解 一、常見的java內存溢出 1、java.lang.OutOfMemmoryError : Java heap space -- JVM Heap &#xff08;jvm 堆溢出&#xff09; JVM啟動時自動設置JVM Heap的值&#xff0c;其初始空間(即 -Xms)是物理內存的1/64&#xff0c;最大空間(-Xms)不可超過物理內存。…

CoreWCF 1.0 正式發布,支持 .NET Core 和 .NET 5+ 的 WCF

CoreWCF 項目組正式發布 1.0 版本的 CoreWCF, 這是面向 .NET Core 平臺的 WCF 移植版本。它支持 SOAP、NetTCP 和 WSDL 的相同實現。在代碼中的使用方式于 WCF 相同&#xff0c;但是升級到使用 ASP.NET Core 作為服務宿主&#xff0c;并工作在 .NET Core 平臺上。這是該項目的第…

【經典回放】多種語言系列數據結構算法:快速排序

快速排序(Quicksort)是對冒泡排序的一種改進。 快速排序由C. A. R. Hoare在1960年提出。它的基本思想是:通過一趟排序將要排序的數據分割成獨立的兩部分,其中一部分的所有數據都比另外一部分的所有數據都要小,然后再按此方法對這兩部分數據分別進行快速排序,整個排序過…

表頭合并_多個Excel表格合并數據麻煩?試試Power Query輕松幫你解決

Hi!大家好&#xff01;歡迎來到小龍自修室&#xff01;又到了小龍分享時間&#xff01;(今天的內容有點多&#xff0c;希望各位看官一定要看到最后&#xff01;有驚喜)上一篇文字小龍和大家一起制作了一個限定數據內容錄入的電子表格&#xff0c;我的表格我做主&#xff01;表格…

C++入門指南及實戰 第三步 基本變量

在C編程中&#xff0c;內置了一些基本數據類型用來存儲一些不同類型的值。有字符類型 char 用以存儲字符&#xff0c;如a、b、c、d、-、、1、2、4、3、>、?等&#xff1b;有整形 int 用以存儲整數類型&#xff0c;如1、2、3、4、5、11、111、2311等&#xff1b;有浮點類型 …

OPCServer Modbus使用和配置

一&#xff0c;安裝KEPware.Enhanced.OPC.DDE.KEPServer。(PLC數據傳送給KEPServer,開發的程序用OPCServer讀KEPServer) 設置ip地址后面是指的plc站號&#xff0c;此處必須和plc上站號對應。否則無法接收數據。 打開quick client 查看傳值情況 二.C#程序代碼 引用opcdaauto.dll…

C# 創建命名管道服務器

通過創建 NamedPipeServerStream 的一個新實例&#xff0c;來創建服務器。NamedPipeServerStream 派生自基類 PipeStream&#xff0c;PipeStream 派生自 Stream 基類&#xff0c;因此可以使用流的所有功能&#xff0c;例如&#xff0c;可以創建CryptoStream 或 GZipStream&…

在香蕉派 Banana Pi BPI-M1上使用 開源 OxOffice Impress

2019獨角獸企業重金招聘Python工程師標準>>> 在香蕉派 Banana Pi BPI-M1上使用 開源 OxOffice Impress 在Banana Pi BPI-M1上使用OxOffice Impress&#xff0c;該簡報大小約26MB&#xff0c;採用自動播放機制。 OxOffice提供 arm linux的版本&#xff0c;可佈署在ar…

免殺新姿勢:利用線程將惡意代碼注入到內存中

本文講的是免殺新姿勢&#xff1a;利用線程將惡意代碼注入到內存中&#xff0c;產生存放遠程攻擊線程的進程在這篇文章中我不想一步一步解釋我編寫的C#代碼&#xff0c;但是我會展示下它能夠繞過殺毒軟件&#xff0c;并且操作非常簡單&#xff0c;而且實用。 首先說明一下&…

【經典回放】多種語言系列數據結構算法:希爾排序

【希爾排序原理】每隔sp(整數)個數即取數并判斷大小,交換,先構造局部有序序列,直到sp為1,構造完整的有序序列。 給出一組數據,如下: 0 1 2 3

Java之解決散列表的沖突用開放定址法和鏈表法

1 問題 理想狀態下&#xff0c;散列表就是一個包含關鍵字的固定大小的數組&#xff0c;通過使用散列函數&#xff0c;將關鍵字映射到數組的不同位置&#xff0c;哈希函數可以將關鍵字均勻的分散到數組的不同位置&#xff0c;不會出現兩個關鍵字散列值相同&#xff08;假設關鍵…

python 手把手教你基于搜索引擎實現文章查重

前言 文章抄襲在互聯網中普遍存在&#xff0c;很多博主都收受其煩。近幾年隨著互聯網的發展&#xff0c;抄襲等不道德行為在互聯網上愈演愈烈&#xff0c;甚至復制、黏貼后發布標原創屢見不鮮&#xff0c;部分抄襲后的文章甚至標記了一些聯系方式從而使讀者獲取源碼等資料。這…