站長資訊網(wǎng)
方法：1、用“$("div").click(function(){})”給div元素添加點擊事件，并指定事件處理函數(shù)；2、在函數(shù)中用“$(this).animate({right:"左劃距離",opacity:'0'},時間);”設置即可。
本教程操作環(huán)境：windows10系統(tǒng)、jquery3.2.1版本、Dell G3電腦。
jquery怎么設置點擊div左滑隱藏
animate() 方法執(zhí)行 CSS 屬性集的自定義動畫。
該方法通過 CSS 樣式將元素從一個狀態(tài)改變?yōu)榱硪粋€狀態(tài)。CSS屬性值是逐漸改變的，這樣就可以創(chuàng)建動畫效果。
只有數(shù)字值可創(chuàng)建動畫（比如 "margin:30px"）。字符串值無法創(chuàng)建動畫（比如 "background-color:red"）。
提示：請使用 "+=" 或 "-=" 來創(chuàng)建相對動畫。
語法
(selector).animate({styles},speed,easing,callback)
參數(shù) 描述
styles 必需。規(guī)定產(chǎn)生動畫效果的一個或多個 CSS 屬性/值。
注意： 當與 animate() 方法一起使用時，該屬性名稱必須是駝峰寫法： 您必須使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此類推。
示例如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>123</title> <script src="js/jquery.min.js"> </script> <script type="text/javascript"> $(function () { $("#panel").click(function () { $(this).animate({ right: "100px",opacity:'0' }, 2000); }) }) </script> </head> <style type="text/css"> * { margin: 0; padding: 0; } body { padding: 100px; } #panel { position: relative; width: 100px; height: 100px; border: 1px solid #0050D0; background: #96E555; cursor: pointer; } </style> <body> <div id="panel"></div> </body> </html>
輸出結(jié)果：
相關視頻教程推薦：jQuery視頻教程
