jquery - 淡入 jquery 加载调用

Question

我有一个关于 jquery 的非常基本的问题。但是我不知道该怎么做，所以这就是为什么我来这里寻求你的帮助。这是我的代码:

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

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

最诚挚的问候

Answer 1

首先，您应该将 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>

<小时/>

编辑 要发表评论，可以在 a 标记中使用 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>