.fadein用javascript

Question

有谁知道如何使这段代码具有.fadein属性？优选地，中等速度的中等速度是最佳的。谢谢！

<script>
function LinkOnClick4(box) {
$('#friendresults').load('conversation.php?id=' + box);
}
</script>

Answer 1

首先隐藏元素，加载它的内容，然后使用load函数的回调函数将其淡入淡出：

function LinkOnClick4(box) {

    //select our element to populate, hide it, load in the new content, then once the new content is loaded, fade it back in
    $('#friendresults').hide().load('conversation.php?id=' + box, function () {
        $(this).fadeIn(750);
    });
}

如果您希望元素在页面中保留其空间（并非完全消失），那么您可以设置它的不透明度而不是使用.hide()和.fadeIn()函数：

function LinkOnClick4(box) {

    //select our element to populate, hide it, load in the new content, then once the new content is loaded, fade it back in
    $('#friendresults').css({ opacity : 0 }).load('conversation.php?id=' + box, function () {
        $(this).fadeTo(1, 750);
    });
}

两个代码块之间的区别在于第一个代码块允许相对定位在#friendresults元素周围的元素在隐藏时移位，而第二个代码块在#friendresults元素移动时保持页面移动{1}}元素被隐藏/显示。

如果您需要更多帮助，可以使用以下文档：

• .hide()：http://api.jquery.com/hide
• .fadeIn()：http://api.jquery.com/fadein
• .fadTo()：http://api.jquery.com/fadeto
• .css()：http://api.jquery.com/css

Answer 2

样式#friendresults隐藏然后调用

$('#friendresults').load('conversation.php?id=' + box, function() {
  $('#friendresults').fadeIn()
});