Fade в JQuery загрузки вызова - PullRequest
Новая
       25

Fade в JQuery загрузки вызова

4 голосов
/ 16 ноября 2010

У меня есть очень простой вопрос о jquery.Однако я не знаю, как это сделать, поэтому я ищу твою помощь.Это мой код:

Редактировать: <a href="javascript:$('#target').load('page.html').fadeIn('1000');">Link</a>

Как видите, я хочу загрузить page.html в div с именем #target.То, что я также хочу сделать, если это не работает, это заставить page.html исчезать при загрузке.Какой правильный путь к этому?

С наилучшими пожеланиями

Ответы [ 2 ]

5 голосов
/ 16 ноября 2010

Во-первых, вы должны поместить свой код 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 в теге a, а затем использовать 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>
3 голосов
/ 16 ноября 2010

Попробуйте 

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

Загрузка имеет полный обработчик ( см. Документ )

...