0
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");
});
});
});
1
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.
Cevap yazabilmek için üye girişi yapmalısınız.
Eğer uzmanim.net üyesiyseniz giriş yapabilirsiniz: üye girişi yap
uzmanim.net'e üye olmak çok kolaydır: hemen kayıt ol
