jQuery淡入/淡出不起作用答案

【问题标题】：jQuery fadeIn/fadeOut not workingjQuery淡入/淡出不起作用
【发布时间】：2013-07-03 04:35:20
【问题描述】：

我正在尝试在单击链接以显示某些内容时弹出一个 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 代码之外什么也没找到，也找不到答案。感谢您的任何帮助。

【问题讨论】：

把这些函数servicesPopup()和closePopupFunction ()写在document.ready function外面再试试。
@RohanKumar - 没必要，它们在它们所在的范围内。
Joe - .popup 和 .container 的 html 在哪里？您显示的代码应该做一些事情， 即使淡入淡出等等不是您所期望的：jsfiddle.net/b23Yz（我发明了一些 html 来匹配您的 JS，但将 close 事件放在文档上点击而不是点击.popupClose。）
N，我进行了更改以准确反映您在 jsfiddle 中的内容，但由于某种原因，我仍然一无所获。我不知道发生了什么。
您的浏览器控制台是否出现任何错误？

标签： jquery fadein fadeout

【解决方案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();
    });    
});

【讨论】：

我不知道这是否重要，但我正在使用 WAMP。