Jquery'de div in margini değiştirme

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");
        });


    });
});

 

kutlugalp kutlugalp (136)
4 yıl önce sordu

    Toplam 1 Cevap


    1

    Jquery .animate() fonksiyonu ile basitçe yapabilirsin

    Kodun nasıl çalıştığını gör

    <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.

    alattin alattin (15286)
    4 yıl önce cevaplandı

      üyelik gerektirir

      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