jquery - jQuery フェードイン/フェードアウトが機能しない

Question

リンクをクリックしてコンテンツを表示すると、ポップアップ div が表示されるようにしようとしています。

jQuery:

    $(document).ready(function() {

    //Popup Content Script
    $("#services").click(function(){

        servicesPopup();

    });

    $(".popupClose").click(function() {

        closePopupFunction();

    });

    function servicesPopup() {

        $(".popup").fadeIn("slow", function() {

            $(".container").css("opacity", ".3");
            $(".popup").html("This is a test.\n\
            This is a test.\n\
            This is a test.\n\
            This is a test.\n\
            This is a test.");

        });   
    };

    function closePopupFunction () {

        $(".popup").fadeOut("slow");
        $(".popup").html("");
        $(".container").css("opacity","1");


    };

    });

HTML:

    <li><a href="#" class="button" id="services" title="Learn about all of our services."><span>Services</span></a></li>

ボタンをクリックしても何も起こりません。コードと HTML の両方を変更するために考えられるあらゆる方法を試しましたが、成功しませんでした。ここで検索を行ったところ、すべての jQuery コードを完全に検索しても何も見つかりませんでした。答えが見つかりません。助けてくれてありがとう。

Answer 1

これを試して、

function servicesPopup() {
    $(".popup").fadeIn("slow", function() {
        $(".container").css("opacity", ".3");
        //Also write the string in a single line or escape it
        $(".popup").html("This is a test.<br/>This is a test.<br/>This is a test.");
    });   
}

function closePopupFunction () {
    $(".popup").fadeOut("slow");
    $(".popup").html("");
    $(".container").css("opacity","1");
}


$(document).ready(function() {
    //Popup Content Script
    $("#services").click(function(e){
        e.preventDefault();
        servicesPopup();
    });

    $(document).on('click',".popupClose",function() {
        closePopupFunction();
    });    
});