淡入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>