Fade in jquery load call

Question

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:

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

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?

Best Regards

Answer 1

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>

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>

---

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>

Answer 2

Try

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

load has a complete handler (see doc)