jQuery加载调用中的淡入效果

Question

jQuery加载调用中的淡入效果

jqueryloadfadein

4

我有一个关于jquery的非常基础的问题。然而，我不知道怎么做，所以我在这里寻求您的帮助。这是我的代码：

编辑： <a href="javascript:$('#target').load('page.html').fadeIn('1000');">Link</a>

如您所见，我想将page.html加载到名为#target的div中。我还想做的事情是使page.html在加载时淡入，但它并没有起作用。正确的方法是什么？

最好的问候

- Paparappa

2个回答

3

尝试

$('#target').load('page.html',{},function(){$('#target').fadeIn(1000)});

load函数有一个完整的处理程序（查看文档）

- Ben

2

现在很少看到内联jQuery了 :) - Ben

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lonesomeday · Accepted Answer

首先，您应该将JavaScript代码放在元素外部。这很容易实现。它使您的HTML和JavaScript更易于理解，并最终允许更有组织的代码。首先，给您的a元素一个id：

<a href='#' id='loadPage'>Link</a>

然后在 script 标签中进行调用：

<script type="text/javascript">
    $(document).ready(function() { // when the whole DOM has loaded
        $('#loadPage').click(function(){ // bind a handler to clicks on #loadPage
            $('#target')
                .hide() // make sure #target starts hidden
                .load('page.html', function() {
                    $(this).fadeIn(1000); // when page.html has loaded, fade #target in
                });
        });
    });
</script>

编辑：评论中，您可以在标签中使用URL，然后使用this.href。

<a href='page.html' id='loadPage'>Link</a>
<script type="text/javascript">
    $(document).ready(function() {
        $('#loadPage').click(function(e){
            e.preventDefault();
            $('#target')
                .hide()
                .load(this.href, function() {
                    $(this).fadeIn(1000);
                });
        });
    });
</script>