Opaklığı ve transformu değiştirecek jQuery kodu

kraljmehmet · 10 Haziran 2018

JavaScript:

    $(function(){
        $(".popup__close-button").click(function(){
            $(".popup").css({
                opacity : "0",
                transform : "scale(.5,.5)"
            }, function(){
                $(".popup").css("display", "none");
            });
        });
    });

Böyle bir kod yazdım.
İlk önce butona tıklayınca opaklığı ve transformu değişecek. Onlar değiştikten sonra display none özelliğini verecek. Böyle denedim ama olmadı. Nerede hata yapıyorum?

Marigold · 11 Haziran 2018

kraljmehmet dedi:
Gecikme olmasını istiyordum hocam.
Fakat, başka bir yöntem ile çözdüm, ne kadar sağlıklı olmasa da.

Doğru olanı aşağıdaki gibidir. Yardımcı olabildiysem ne mutlu bana

JavaScript:

$(".Popup").delay(3000).queue(function(){
            $(this).css("display", "none");
        })

Marigold · 10 Haziran 2018

HTML:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Başlıksız Belge</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
    <button class="Button">Try</button>
    <div class="Popup">Keep going</div>
    <script>
    $(".Button").click(function(){
        $(".Popup").css({
            opacity   : "0",
            transform : "scale(.5,.5)",
            display   : "none"
        });
    });
    </script>
</body>
</html>

kraljmehmet · 11 Haziran 2018

Silinen üye dedi:

HTML:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Başlıksız Belge</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
    <button class="Button">Try</button>
    <div class="Popup">Keep going</div>
    <script>
    $(".Button").click(function(){
        $(".Popup").css({
            opacity   : "0",
            transform : "scale(.5,.5)",
            display   : "none"
        });
    });
    </script>
</body>
</html>

Maalesef bu kadar basit değilmiş hocam.

Marigold · 11 Haziran 2018

kraljmehmet dedi:
Maalesef bu kadar basit değilmiş hocam.

Yapmak istediğinizi biraz anladım ancak açıklamanızın dışına çıkmadım. Açıklamanıza bakılırsa önce opacity ve transform, sonrasında display özelliğini değiştirmek istediğinizi söylemişsiniz. Aralarında gecikme veya başka bir şey olacağına dair bir şey yazmamışsınız.

kraljmehmet · 11 Haziran 2018

Gecikme olmasını istiyordum hocam.
Fakat, başka bir yöntem ile çözdüm, ne kadar sağlıklı olmasa da.

Kod:

$(function(){
        $(".popup__close-button").click(function(){
            $(".popup").css({
                "pointer-events" : "none",
                opacity : "0",
                transform : "scale(.2,.2)"
            }).attr("popup-open","0");
            $("body").css("overflow-y", "");
        });
        $(".popup-open").click(function(){
            var thisPopup = $(this).attr("data-popup");
            $(".popup[data-popup=" + thisPopup + "]").css({
                "pointer-events" : "",
                opacity : "",
                transform : ""
            }).attr("popup-open","1");
            $("body").css("overflow-y", "hidden");
        });
    });

9390 · 11 Haziran 2018

HTML:

    <button class="Button">Try</button>
    <div class="Popup" style="background-color: red; height: 200px; ">Keep going</div>
    <script>
    $(".Button").click(function(){
        $(".Popup").animate({
            opacity   : "0.05",
            width : "50%",
            height : "100"
        }, 3000, function(){
            $(this).css("display", "none");
        });
    });
    </script>

Animate fonksiyonu ile de yapılabilir.

kraljmehmet · 11 Haziran 2018

9390 dedi:

HTML:

    <button class="Button">Try</button>
    <div class="Popup" style="background-color: red; height: 200px; ">Keep going</div>
    <script>
    $(".Button").click(function(){
        $(".Popup").animate({
            opacity   : "0.05",
            width : "50%",
            height : "100"
        }, 3000, function(){
            $(this).css("display", "none");
        });
    });
    </script>

Animate fonksiyonu ile de yapılabilir.

Animate denedim fakat animatede transform özelliği olmuyor.
Zaten sorunu çözmüştüm, yardımın için teşekkür ederim.

76087 · 11 Haziran 2018

@kraljmehmet Hocam öğrenmeye çalıştığınız programlama dilinin geliştiricilerinin Discord'una girerseniz çok daha hızlı cevap alırsınız. Örneğin SpeakJS sunucusu:

Marigold · 11 Haziran 2018

kraljmehmet dedi:
Gecikme olmasını istiyordum hocam.
Fakat, başka bir yöntem ile çözdüm, ne kadar sağlıklı olmasa da.

Doğru olanı aşağıdaki gibidir. Yardımcı olabildiysem ne mutlu bana

JavaScript:

$(".Popup").delay(3000).queue(function(){
            $(this).css("display", "none");
        })

kraljmehmet · 12 Haziran 2018

Silinen üye dedi:
Doğru olanı aşağıdaki gibidir. Yardımcı olabildiysem ne mutlu bana

JavaScript:

$(".Popup").delay(3000).queue(function(){ $(this).css("display", "none"); })

Teşekkürler hocam, bu opacity ve transform csslerini de delaydan önce mi koyacağım?

Opaklığı ve transformu değiştirecek jQuery kodu

Ayrıntılı düzenleme

kraljmehmet

Hectopat

Marigold

Marigold

Ziyaretçi

kraljmehmet

Hectopat

Marigold

Ziyaretçi

kraljmehmet

Hectopat

9390

Kilopat

kraljmehmet

Hectopat

76087

Kilopat

Marigold

Ziyaretçi

kraljmehmet

Hectopat

Benzer konular