jQuery的淡入淡出工作沒有AJAX？

我正在提交表單，有時我會向用戶顯示一些消息。點擊「提交」按鈕後，我想要這些消息到jQuery fadeIn。如果提交不涉及任何AJAX，是否有可能實現？jQuery的淡入淡出工作沒有AJAX？

下面是一個示例Django的/ Python代碼：

# View code 
message = 'feedback to user' 

# Template 
<div id="messages">{{ message }}</div>

的等效PHP代碼上面的可能是：

<?php 
$message = 'feedback to user'; 
?> 
<div id="messages"><?= $message ?></div>

我想#messages以上對POST後褪色英寸我怎樣才能做到這一點？

來源

2010-06-02 Thierry Lam

在發佈表單後，您正在導致頁面刷新，這是大多數表單在Web上的典型表現，對吧？

好的，沒關係。考慮到逐步增強，保持#messages用CSS可見，然後把它藏在jQuery和淡入它：

$(function() 
{ 
    $('#messages').hide().fadeIn(); 
});

fadeIn()只是一個功能，爲您動畫的網頁上的元素。它完全與Ajax請求無關。

來源

2010-06-02 18:45:10 BoltClock

只要有它在你的document.ready事件處理程序，如下所示：

$(function() { 
    $("#messages").fadeIn(); 
});

如果有一個id="messages"，它會發現它和消除它...如果它不存在，這很好，它贏得了錯誤。如果你想檢查是否有衰落之前的任何測試，你可以做到這一點，就像這樣：

$(function() { 
    $("#messages").filter(function() { return $(this).text() != ""; }).fadeIn(); 
});

在這種方法中<div id="messages">是始終存在的，但只是消失在是否有它的一些文字。

來源

2010-06-02 18:43:58

+1總是很高興有創意，有時擴大我們的答案！ – BoltClock 2010-06-02 18:48:28

尼克尼克，我可以加強我的消息與一些愛從這:) – 2010-06-02 19:16:56

首先，我知道這不是「完全」你命令/要求，我開始像你一樣，然後我想顯示一些「罐裝」的東西爲ajax調用以及定時的消息在它的不同消息，因此我想出了這個：（注：對於你的改變errorMessage.show();到errorMessage.fadein();）

<div class="myErrorContainer"> 
     <div class="myErrorStatus ajaxLoading " id="myErrorStatus"> 
      <span id="Errorstatus" class="ui-state-error-text myErrorStatusText"></span> 
     </div> 
    </div>

表現出一點ajax的裝載使用CSS

.ajaxLoading 
{ 
    width: 100%; 
    background-image: url("../Images/ajax-loader.indicator.gif"); 
    background-repeat: no-repeat; 
    background-position: left middle; 
} 
.myErrorStatus 
{ 
    text-align: center; 
    width: 100%; 
} 
.myErrorStatusText 
{ 
    color: #FF0000; 
    font-weight: bold; 
} 

/* show message for interval */ 
var saveMessageText = 'Saving...'; 
function ShowStatus(saveMessage, message, timeInMilliseconds) 
{ 
    var errorMessage = $("#Errorstatus"); 
    if (saveMessage) 
    { 
     errorMessage.show(); 
     var myInterval = window.setInterval(function() 
     { 
      message = message + '...'; 
      errorMessage.text(message); 
      errorMessage.show(); 
     }, 1000); 
     window.setTimeout(function() 
     { 
      clearInterval(myInterval); 
      errorMessage.hide(); 
     }, timeInMilliseconds); 
    } 
    else 
    { 
     errorMessage.text(message); 
     errorMessage.show(); 
     window.setTimeout('$("#Errorstatus").hide()', timeInMilliseconds); 
    }; 
};

然後（如果你想要的），我把這個在所有ajax調用上顯示:(其中myUserName javascript var iable擁有用戶名）

/*阿賈克斯方法*/

/* show the message that data is loading on every ajax call */ 
var loadingMessage = 'Please wait loading data for ' + myUserName; 
$(function() 
{ 
    $("#Errorstatus") 
    .bind("ajaxSend", function() 
    { 
     $(this).text(loadingMessage); 
     $(this).show(); 
    }) 
    .bind("ajaxComplete", function() 
    { 
     $(this).hide(); 
    }); 
});

然後，你可以用它像這樣：

ShowStatus(true, 'Update Failed with unknown Error', 4000);

注意：如果你不想ajax的背景做指標你可以做一個$('#myErrorStatus').removeClass('ajaxloading');然後用$('#myErrorStatus').addClass('ajaxloading');稍後替換它。

來源

2010-06-02 19:15:27

jQuery的淡入淡出工作沒有AJAX？

回答

相關問題