Bu örneğimizde JQuery ile slideUp ve slideDown kullanarak bir div öğesinin animasyonlu olarak önce kapanıp sonra açılmasını yani gizlenip gösterilmesini sağlayacağız. Yani bu iki fonksiyonu birlikte aynı anda kullanacağız. Daha önceki örneklerimizde kullanmış olduğumuz hide() ve show() fonksiyonlarından farklı olarak slideUp ve slideDown belirlediğimiz süre içerisinde gizleme ve gösterme işlemini gerçekleştirecek.
Örneğimizde html sayfasına iki adet div ekleyeceğiz. Daha sonra üstteki div‘ e tıklandığında alt bölümün toplam 1000 ms süreyle kapanmasını ve kapandıktan hemen sonra 2000 ms süresinde tekrar açılmasını sağlayacağız. Sayfamızı çalıştırdığımızda ekran görüntüsü aşağıdaki gibi olacaktır.
Kodlarımız:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> <title>www.yazilimkodlama.com</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> #kutu1, #kutu2 { padding: 5px; text-align: center; background-color: #c4e4f2; border: solid 1px #112233; } #kutu2 { padding: 50px; } </style> </head> <body> <div id="kutu1">Tıkla</div> <div id="kutu2">www.yazilimkodlama.com</div> <script> $(document).ready(function(){ $("#kutu1").click(function(){ $("#kutu2").slideUp(1000).slideDown(2000); }); }); </script> </body> </html> |
