国产在线观看无码的免费网站,国产无遮挡又黄又爽免费网站

js控制div顯示隱藏實(shí)現(xiàn) jq點(diǎn)擊隱藏再點(diǎn)擊顯示切換

文章插圖
本文分享自華為云社區(qū)》，原文作者：灰小猿。
首先來看一個簡單的動畫效果圖：
我之前也和小伙伴們講過使用 jQuery 框架可以很好的對 html 中元素的屬性等進(jìn)行操作，所以上面顯示和隱藏的也只是一個 div，而并不是一個圖片。下面我就來和小伙伴們講一個如何對元素的屬性進(jìn)行操作，使其顯示或者隱藏！
在 jQuery 框架中對元素對象進(jìn)行顯示和隱藏有三種方式，分別是“默認(rèn)方式顯示和隱藏”、“滑動方式顯示和隱藏”、“淡入淡出顯示和隱藏” 。接下來我們就分別對這三種方法進(jìn)行介紹。
一、默認(rèn)方式顯示和隱藏在默認(rèn)方法下顯示元素的方法是
show([speed,[easing],[fn]])
其中的參數(shù)含義為：
speed：動畫的速度。三個預(yù)定義的值(“slow”,”normal”,”fast”)或表示動畫時長的毫秒數(shù)值(如：1000)easing：用來指定切換效果，默認(rèn)是”swing”，可用參數(shù)”linear” 。* swing：動畫執(zhí)行時效果是先慢，中間快，最后又慢。* linear：動畫執(zhí)行時速度是勻速的fn：在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。同時在這里提醒一點(diǎn)就是，以上的三個參數(shù)是可有可無的，如果不對其進(jìn)行設(shè)置，那么將以默認(rèn)值執(zhí)行。
如下實(shí)例代碼：
// 顯示div $("#showDiv").show("slow","swing"); linear 勻速在默認(rèn)方式下實(shí)現(xiàn)元素隱藏的方法是
hide([speed,[easing],[fn]])
其中的參數(shù)含義和 show 方法中的一樣。同樣也是三個參數(shù)是可有可無的，如果不對其進(jìn)行設(shè)置，那么將以默認(rèn)值執(zhí)行。在這里我們增加一個最后的執(zhí)行函數(shù)，讓其彈出一個窗口“隱藏了…” 。
如下實(shí)例代碼：
// 隱藏div$("#showDiv").hide("slow","swing",function () {alert("隱藏了...")});那么難道我們每次都要定義一個方法用于元素顯示，再定義一個方法用于元素隱藏嗎？并不是的，jQuery 中也充分的考慮到了這一點(diǎn)，所以在有一個既能實(shí)現(xiàn)顯示又能實(shí)現(xiàn)隱藏的方法
toggle([speed],[easing],[fn])
當(dāng)調(diào)用該方法的時候，元素就會被隱藏掉，類似于 hide()方法，當(dāng)再次調(diào)用時，元素又會被顯示出來，類似于 show()方法。
其中的參數(shù)含義和上面一樣
實(shí)例代碼如下：
// 能顯示能隱藏 $("#showDiv").toggle("slow","linear");?默認(rèn)方式下實(shí)現(xiàn)效果如圖：
二、滑動方式顯示和隱藏從名字上我們應(yīng)該也能區(qū)分出，滑動方式和默認(rèn)方式的不同之處其實(shí)就是顯示和隱藏時的動畫不一樣罷了，下面我們就來介紹一下在滑動方式下進(jìn)行元素的顯示、隱藏、既顯示又隱藏，
滑動方式下顯示
slideDown([speed],[easing],[fn])
實(shí)例代碼：
// 滑動顯示div$("#showDiv").slideDown("slow");滑動方式下隱藏
slideUp([speed,[easing],[fn]])
實(shí)例代碼：
// 滑動隱藏div$("#showDiv").slideUp("fetch");滑動方式下既顯示又隱藏：
slideToggle([speed],[easing],[fn])
實(shí)例代碼：
// 滑動能顯示能隱藏$("#showDiv").slideToggle("slow");滑動方式下實(shí)現(xiàn)效果如圖：
三、淡入淡出方式顯示和隱藏淡入淡出方式下進(jìn)行元素的顯示和隱藏其實(shí)和上面兩種方法一樣的，不同的也只是顯示的效果不一樣罷了，
淡入淡出方式下顯示使用的方法是：
fadeIn([speed],[easing],[fn])
實(shí)現(xiàn)代碼：
// 淡出顯示div$("#showDiv").fadeIn("slow")淡入淡出方式下實(shí)現(xiàn)隱藏
fadeOut([speed],[easing],[fn])
實(shí)現(xiàn)代碼：
// 淡出隱藏div$("#showDiv").fadeOut("fetch");淡入淡出方式下既顯示又隱藏

以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問題，請您及時就醫(yī)或請專業(yè)人士給予相關(guān)指導(dǎo)!

「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對您有所幫助：

js控制div顯示隱藏實(shí)現(xiàn) jq點(diǎn)擊隱藏再點(diǎn)擊顯示切換