Jquerye yeni başladım diye bilirim. :D
bir butona tıklayınca bir divin margin-top -300 yaparak yukarı sonraki tıklamama margin-top 0 yaparak aşığı çekmek istiyordum
Aşağıdaki gibi bir kod oluşturdum istediğim gibi çalışıyor ama tek seferlik 1 tıklıyorum yukarı çıkıyor 2. tıklıyorum aşağı iniyor ama ondan sonra 3. tıklamam hiç bir şey olmuyor tekrar yukarı çıkmasını istiyorum ama olmuyor bir çözüm yoluda bulamdım bilen arkadaşlar nasıl yapıldğını anlatırsa sevinirim.
$(function () {
$("#butooon").click(function () {
$('header').css("margin-top", "-300px").css("transition", "all .5s ease-in-out");
$("#butooon").click(function () {
$("header").css("margin-top", "0").css("transition", "all .5s ease-in-out");
});
});
});
Toplam 1 cevap
Jquery .animate() fonksiyonu ile basitçe yapabilirsin
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="kutu" style="border:1px solid #000000; width:100px; height:100px; background-color:#ff6a00">
</div>
<button>Kaydır</button>
<script>
$(function () {
var flag = true;
$('button').click(function () {
if (flag) {
$('#kutu').animate({ "margin-top": "+=50px" }, "slow");
flag = false;
} else {
$('#kutu').animate({ "margin-top": "-=50px" }, "slow");
flag = true;
}
})
})
</script>
</body>
</html>jquery .animate() fonksiyonu ile CSS özelliklerini animasyon ile elementlere verebilirsin.
flag değişkeni (javascript değişken) sadece butonun durumunu tutuyor. 1. tıklamada değer true olduğu için kutuyu aşağı indiyor sonra flag degeri false oluyor. Bu durumda ilk kez butona basıldığını anlıyoruz. .animate() ise kutunun margin-top değerini 50px arttırıyor.
Butona ikinci tıklamada flag değeri false olduğu için if koşulundaki else bölümü çalışıyor. Bu sefer margin-top 50px azaltılıyor ve kutu eski yerine geliyor.