jQuery的效果函數

来源:http://www.cnblogs.com/mamashoumingzichangyounanhaizixihuan-1/archive/2016/09/16/5876743.html
-Advertisement-
Play Games

jQuery有效果函數方法 描述 animate() 對被選元素應用“自定義”的動畫 clearQueue() 對被選元素移除所有排隊的函數(仍未運行的) delay() 對被選元素的所有排隊函數(仍未運行)設置延遲 dequeue() 運行被選元素的下一個排隊函數 fadeIn() 淡入被選元素至 ...


jQuery有效果函數
方法                        描述
animate()             對被選元素應用“自定義”的動畫
clearQueue()             對被選元素移除所有排隊的函數(仍未運行的)
delay()             對被選元素的所有排隊函數(仍未運行)設置延遲
dequeue()             運行被選元素的下一個排隊函數
fadeIn()             淡入被選元素至完全不透明
fadeOut()             淡出被選元素至完全不透明
fadeTo()             把被選元素減弱至給定的不透明度
hide()                 隱藏被選的元素
queue()             顯示被選元素的排隊函數
show()                 顯示被選的元素
slideDown()             通過調整高度來滑動顯示被選元素
slideToggle()             對被選元素進行滑動隱藏和滑動顯示的切換
slideUp()             通過調整高度來滑動隱藏被選元素
stop()                 停止在被選元素上運行動畫
toggle()             對被選元素進行隱藏和顯示的切換

 

animate()在jquery中作為一個方法,可用於創建動畫效果,jquery中的animate()方法讓那個頁面增加了很好的視覺效果

<div class="wrap">   <img src="images/s1.jpg" alt="photo" />   <div class="cover">     <h3>儘快來房間愛離開風口浪尖</h3>     <p>發貨空間按恢復健康等哈就快遞費還看見愛會儘快恢復可驕傲的劃分空間的及刻錄機</p>     <p><a href="#">風華絕代</a></p>   </div> </div>  

CSS

我們需要用CSS將.wrap排成行,並且要將.cover覆蓋層隱藏一部分,當滑鼠滑上去是通過調用jquery才顯示出來。 .wrap{position:relative; float:left; width: 200px; height:200px; margin:5px; background:#e8f5fe; overflow:hidden;} .wrap img{position:absolute; top:0; left:0} .wrap h3{line-height:30px; font-size:14px; color:#fff} .wrap p{line-height:20px} .cover{position:absolute; background:#000; height:120px; width:100%; padding:3px; top:170px; }  

jQuery

首先我將覆蓋層的透明度設置為0.8,然後當滑鼠滑上圖片時,使用hover函數來調用animate動畫。 $(function(){   $(".cover").css("opacity",.8);   $(".wrap").hover(function(){     $(".cover", this).stop().animate({top:"80px"},{queue:false,duration:160});   },function(){     $(".cover", this).stop().animate({top:"170px"},{queue:false,duration:160});   }); });   切換 <p> 元素的顯示與隱藏狀態:
$(".btn1").click(function(){
  $("p").hide();
});

定義和用法

toggle() 方法切換元素的可見狀態。

如果被選元素可見,則隱藏這些元素,如果被選元素隱藏,則顯示這些元素。

 

語法

$(selector).toggle(speed,callback,switch)
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 好久沒出來水了!!!忙忙碌碌的找工作~然後中秋節也算過了,祝各位coding們,直接覺醒第七感小宇宙,直接用心就能找到bug-_-// 最後如題這是一篇很正規的coding的文章 大概麽比以前的加了個歌詞,之前的炸了,然後最近又修好了,一直東西在搬家,這次估計不搬家了,大不了美橙在買幾個空間hoho ...
  • javascript檢查元素存在性: 即使這個元素被刪除了,也不擔心javascript代碼報錯; jquery檢查元素存在性: 代碼如下: jquery $(“#preview”)獲取的永遠是對象,即使網頁上沒有此元素。 不能使用以下代碼: 因此要用jquery檢查某個元素在網頁上是否存在時,應該 ...
  • 1、什麼是HTML語義化? <基本上都是圍繞著幾個主要的標簽,像標題(H1~H6)、列表(li)、強調(strong em)等等> 根據內容的結構化(內容語義化),選擇合適的標簽(代碼語義化)便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。 2、為什麼要語義化? 為了在沒有CS ...
  • [1]select [2]option [3]添加選項 [4]移除選項 ...
  • jqeury的效果有隱藏顯示、淡入淡出、滑動、動畫、停止動畫,還可以把方法和動作鏈接起來。下麵我來說一下它們的用法和需要的參數。 1.隱藏/顯示 hide()可以使元素隱藏。語法是: $(selector).hide(speed,callback); show()使元素顯示。語法是:$(select ...
  • 在jquery中有很多的動畫效果,我給大家分享了一下jquery中的動畫函數 jQuery的效果函數列表: animate():對被選元素應用“自定義”的動畫。 clearQueue():對被選元素移除所有排隊的函數(仍未運行的)。 delay():對被選元素的所有排隊函數(仍未運行)設置延遲。 d ...
  • (-1)寫在前面 首先圖片是我從互聯網上下載的,向這位前輩致敬。我用的是chrome49,沒有加不同瀏覽器的首碼,jquery3.0,圖片資源放在了我的百度雲盤上http://pan.baidu.com/s/1o7LyHp4 (1)知識預備 a.瀏覽器x、y、z軸的概念 左手豎代表y軸,右手橫代表x ...
  • 在上一篇《webpack從入門到上線》介紹了wepack的配置和相關的概念,這一篇介紹怎樣寫一個webpack loader. 通過寫一個js的html模板為例子。 上篇文章已提及,loader載入器就是對各種非正常資源的解析,轉化成瀏覽器可以識別的js/css文件等,甚至可以說loader就是一個 ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...