Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk menetapkan klik div ke slaid ke kiri dan bersembunyi dalam jquery
Bagaimana untuk menetapkan klik div ke slaid ke kiri dan bersembunyi dalam jquery
- WBOYasal
- 2022-04-24 18:30:291624semak imbas
Kaedah: 1. Gunakan "$("div").click(function(){})" untuk menambah acara klik pada elemen div dan nyatakan fungsi pemprosesan acara; this).animate({kanan:"jarak lejang kiri",opacity:'0'},masa);" Tetapkan sahaja.
Persekitaran pengendalian tutorial ini: sistem windows10, versi jquery3.2.1, komputer Dell G3.
Cara untuk menetapkan div klik untuk slaid ke kiri dan bersembunyi dalam jquery
Kaedah animate() melaksanakan animasi tersuai bagi set sifat CSS.
Kaedah ini menukar elemen dari satu keadaan ke keadaan lain melalui gaya CSS. Nilai sifat CSS berubah secara beransur-ansur, membolehkan anda mencipta kesan animasi.
Hanya nilai angka boleh dianimasikan (cth. "margin:30px"). Nilai rentetan tidak boleh dianimasikan (seperti "warna latar:merah").
Petua: Gunakan " =" atau "-=" untuk mencipta animasi relatif.
Sintaks
(selector).animate({styles},speed,easing,callback)Penerangan Parameter
gaya Diperlukan. Menentukan satu atau lebih sifat/nilai CSS yang menghasilkan kesan animasi.
Nota: Apabila digunakan dengan kaedah animate(), nama sifat mestilah camelCase: anda mesti menggunakan paddingLeft dan bukannya padding-left, marginRight bukannya margin-right dan sebagainya.
Contoh adalah seperti berikut:
<!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>Hasil keluaran:
Tutorial video berkaitan yang disyorkan: tutorial video jQuery
Atas ialah kandungan terperinci Bagaimana untuk menetapkan klik div ke slaid ke kiri dan bersembunyi dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!