JQuery AJAX淡入内容[重复]答案

【问题标题】：JQuery AJAX fadeIn content [duplicate]JQuery AJAX淡入内容[重复]
【发布时间】：2012-10-02 14:26:07
【问题描述】：

可能重复：
Making my ajax updated div fade in

我希望 AJAX 调用的内容在我的页面上调用 fadeIn，但是当我使用此代码 $('#sub_container').html(content).fadeIn(); 时它不起作用，即使我将动画速度设置为超慢 (slow(5000))

$('.create').click(function(){
    loadingimg();
    document.title = 'Create Message';
    $.ajax({
        url: 'create.php',
        dataType: 'html',
        success: function(content){
            $('#sub_container').html(content);
            // $('#sub_container').html(content).fadeIn(); <- Fails
        }
    });
});

【问题讨论】：

复制：stackoverflow.com/questions/183638/…, stackoverflow.com/questions/8262573/…

标签： php jquery ajax

【解决方案1】：

.fadeIn() 函数本质上使元素可见，因此如果元素已经可见，则似乎什么都不做。您可以通过隐藏元素来确保不是这种情况：

$('#sub_container').hide().html(content).fadeIn();

【讨论】：

非常感谢，刚刚试了一下，它成功了。

【解决方案2】：

您需要确保它一开始是隐藏的，例如：

$('.create').click(function(){
$('#sub_container').fadeOut();    // fade out the current content
loadingimg();
document.title = 'Create Message';
$.ajax({
    url: 'create.php',
    dataType: 'html',
    success: function(content){
        $('#sub_container').html(content).stop().fadeIn();    // fade in the new content
    }
});
});

但这会让你在元素消失时跳转内容，所以你必须在必要时考虑到这一点。

【讨论】：