jQuery fadeIn / fadeOut无法正常工作

时间:2013-07-03 04:35:20

标签: jquery fadein fadeout

当点击链接显示某些内容时,我试图让弹出窗口显示出来。

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代码的完整查找,但找不到答案。感谢您的任何帮助。

1 个答案:

答案 0 :(得分:0)

试试这个,

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