Question

我得到了一个简单的twitter bootstrap消息框，我写了一些jQuery效果。

首先，我淡出了电路板，一旦它完成淡出，我就会写出我想要的东西，然后再将它淡入。

我有两个版本：

第一个，使用本地定义的函数：

function postMessage(message, context) {
    if(typeof context === 'undefined')
        context = "info";

    var newClass = "alert alert-" + context;
    var messageBoard = $("#messageBoard");
    // Fade out
    messageBoard.fadeOut('slow', postFadeOut);

    var postFadeOut = function() {
        alert("XX");
//      $(this).attr('class', newClass);
//      $(this).html(message);
//      // Fade in again
//      $(this).fadeIn('slow');
    }
}

它不会触发alert("XX")，但是：

function postMessage(message, context) {
    if(typeof context === 'undefined')
        context = "info";

    var newClass = "alert alert-" + context;
    var messageBoard = $("#messageBoard");
    // Fade out
    messageBoard.fadeOut('slow', postFadeOut);
}

function postFadeOut() {
    alert("XX");
//  $(this).attr('class', newClass);
//  $(this).html(message);
//  // Fade in again
//  $(this).fadeIn('slow');
}

会触发。为什么呢？

Answer 1

在致电postFadeOut

之前尝试声明messageBoard.fadeOut('slow', postFadeOut)变量

function postMessage(message, context) {
    if(typeof context === 'undefined') {
        context = "info";
    };
    var newClass = "alert alert-" + context;
    var messageBoard = $("#messageBoard");
    var postFadeOut = function() {
        $(this).attr('class', newClass);
        $(this).html(message);
        // Fade in again
        $(this).fadeIn('slow');
    }
    // Fade out
    messageBoard.fadeOut('slow', postFadeOut);
}

postMessage("message")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="messageBoard">message board</div>

jQuery fadeOut回调函数 - 为什么本地函数在全局函数运行时不会起作用？

1 个答案: