淡入jquery加载调用 [英] Fade in jquery load call

问题描述

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

I have a really basic question about jquery. However I don't know how to this so that's why i'm here looking for your help. This is my code:

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

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

As you see i want to load page.html into a div called #target. What I also want to do wich doesen't work is to make page.html fade in when it loads. What's the right way to that?

最好的问候

推荐答案

首先，您应该将Javascript代码放在元素本身之外.这很简单.它使您的HTML和Javascript更容易理解，并最终允许组织更多的代码.首先，给您的a元素一个id:

First, you should put your Javascript code outside the element itself. This is fairly simple to do. It makes your HTML and Javascript much more easily comprehensible and ultimately allows much more organised code. First, give your a element an id:

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

然后在script标签中拨打电话:

Then make your call in a script tag:

<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.

---

Edit To comment, yes you can use a URL in the a tag and then use 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>

这篇关于淡入jquery加载调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！