jQuery slide yani kaydırma efekti öğeleri yukarı aşağı kaydırmamıza yani yukarı aşağı animasyonlu şekilde açılmasına olanak sağlar.
3 çeşit sliding metodumuz bulunmaktadır. Bunlar :
- slideDown()
- slideUp()
- slideToggle()
slideUp metodu bir öğeyi yukarı kaydırmak için kullanılır. Yani Açık bir öğeyi yukarı doğru kapatmak istersek bu metodu kullanırız.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kodlamaklazım | Jquery</title>
<!--Jquery sayfamıza dahil ediyoruz-->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
}
</style>
</head>
<body>
<div id="flip">Tıkla Ve yukarı doğru yoket</div>
<div id="panel">Kodlamaklazım</div>
</body>
</html>
slideDown metodu tetiklenen öğeyi yukarıdan aşağı doğru kaydırmamıza olanak sağlar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kodlamaklazım | Jquery</title>
<!--Jquery sayfamıza dahil ediyoruz-->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Tıkla Ve aşağı kaydır</div>
<div id="panel">Kodlamaklazım</div>
</body>
</html>
slideToggle metodu ise slidedown ve slideup metodunun birleşmiş halidir. Tıkladığımızda eğer aşağıdaysa yukarı, yukarıdaysa aşağı kaydırmamızı sağlar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kodlamaklazım | Jquery</title>
<!--Jquery sayfamıza dahil ediyoruz-->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Aç kapa</div>
<div id="panel">Kodlamaklazım</div>
</body>
</html>
26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi
