1

我的网站使用一个$.get函数将通过链接提供的数据发送到一个 PHP 脚本，该脚本从数据库中检索数据并将该数据回显到该$.get函数，然后该函数使用一个.html(data)函数淡入数据并将其呈现在一个 div 中。

$(document).ready(function() {
    $('.topNavLink').click(function() {
        $.get('/view/scripts/data.php', { 'page' : $(this).text() }, function(data) {
            $('#contents').fadeOut(100, function() {
                $('#contents').html(data).fadeIn(100)
            });
        });
    });
});

.topNavLink当然是导航菜单中每个链接的类，该函数读取链接标签之间的文本以查找页面名称。

我有一个<div id='#loading'>最初被 CSS 隐藏的opacity:0. 我希望在单击.fadeIn(100)a 时使用一个函数淡入 div .topNavLink，然后调用上面的代码加载页面内容，最后淡出 div。

我之前尝试过调用 div fadeIn ，$.get如下所示：

$('.topNavLink').click(function() {
    $('#loading').fadeIn(100);
    $.get('/view/scripts/data.php', { 'page' : $(this).text() }, function(data) {
...

我试过像这样使用淡入淡出的回调选项：

$('.topNavLink').click(function() {
    $('#loading').fadeIn(100, function() {
        $.get('/view/scripts/data.php', { 'page' : $(this).text() }, function(data) {
...

但最终它最终没有显示 div 或没有加载内容。

我做错了什么（希望我的意图很明确，你知道我想要完成什么）？

4

2 回答 2

1

我认为您不应该使用 fadeIn 来隐藏#loadingdiv，opacity:0而是使用display:nonefadeIn 来工作。

于 2012-10-05T09:16:00.500 回答
0

您可以使用许多事件 (http://docs.jquery.com/Ajax_Events) 来显示加载 div。我建议尝试beforeSend，因为它将在 ajax 调用发生之前被触发。您将不得不稍微重写您的 ajax 调用（它可能不是 100% 正确，但它应该能说明我的观点）：

$.ajax({
    url: '/view/scripts/data.php',
    data: $(this).text(),
    beforeSend: function(){
        $('#contents').fadeOut(100, function(){
            $('#loading').fadeIn(100);
        });
    },
    success: function(data){
        $('#loading').fadeOut(100, function(){
            $('#contents').html(data).fadeIn(100);
        });
    }
});
于 2012-10-05T09:19:59.543 回答