JQuery: можете ли вы добавить эффекты перехода в .load - PullRequest
4 голосов
/ 02 февраля 2011

я медленно прогрессирую в своей работе, постоянно пробую разные подходы.

быстрый вопрос ...

возможно ли добавить анимационные эффекты jquery, такие как .fadein .fadeout .slideup .slidedown и т. Д.на .click.load.

в тот момент, когда я нажимаю на ссылку, страница просто загружается в моей назначенной области, но я не уверен, как привязать эффект к этому .load.

какие-либо предложения?

РЕДАКТИРОВАТЬ: Пример кода:

$(document).ready(function(){ 
    // load home page when the page loads
    $("#main_content_inner").load("home.html");

    $("#page1").click(function(){
        // load page1 in main_content_inner on click
        $("#main_content_inner").load("page1.html");
    });
    $("#page2").click(function(){
        // load page2 in main_content_inner on click
        $("#main_content_inner").load("page2.html");
    });
    $("#page3").click(function(){
        // load page3 in main_content_inner on click
        $("#content").load("page3.html");
    });
});

РЕДАКТИРОВАТЬ: фрагмент из файла HTML:

// где страница должна отображаться

    <div id="main_content_inner">
        <h1>
            Main Content
        </h1>
    </div>

// меню боковой панели, где пользователь выбирает страницу

            <ul id="sidebar_menu">

            <p><li id="page1"> page1</li></p>

            <p><li id="page2"> page2</li></p>

            <p><li id="page3"> page3</li></p>

          </ul>

этот код в настоящее время загружает документы html в мой назначенный div на моей главной странице.Я хочу сделать это, но с переходом.

Я решил загрузить весь HTML-документ, а не загружать конкретное содержимое из документа, потому что я обнаружил, когда я включил JavaScript в конкретное содержимое документа, а затем попыталсячтобы загрузить его на моей главной странице, javascript (твиттер твиттер) не будет отображаться.но когда я открыл html-файл отдельно, он работал бы нормально, поэтому казалось, что ajax загрузит javascript в мой div содержимого на главной странице.

любые предложения о том, как сделать этот код более практичным для моих нужд и т. д..im открыт для критики и особенно предложений, поскольку это все об обучении.

спасибо

Ответы [ 3 ]

4 голосов
/ 02 февраля 2011
$('.element').click(function()
{
    $('.load').load('url').hide().fadeIn('slow');
});
1 голос
/ 02 февраля 2011

Вам понадобится $ (document) .ready (), если вы пытаетесь что-то сделать после загрузки страницы.

http://api.jquery.com/ready/

Причина, по которой вы используетеready () и not load () - это то, что load () происходит, когда html анализируется, но до того, как объектная модель документа (DOM) готова, и именно на это опирается JS для манипулирования содержимым страницы (DOM).Поэтому вы присоединяетесь к ready (), когда хотите настроить то, что представляет браузер, например, для манипулирования фактическим контентом (добавление / удаление / манипулирование элементами / классами / структурой, инициализация лайтбокса и других плагинов, выполнение эффектов и т. Д.).

Итак, я думаю, что вы описываете:

$(document).ready(function(){
    $('a.clickaffected').each(function(){
        $(this).fadeIn();
    });
});

РЕДАКТИРОВАТЬ: Вы хотите сделать функцию обратного вызова:

$(document).ready(function(){ 
    // load home.html page when the page loads
    $("#main_content_inner").load("onmouseclick.html");
    $("#latest").click(function(){ // load page1 on click
        $("#main_content_inner").hide();
        $("#main_content_inner").load("testscript.html", function(){
            $(this).fadeIn(5000);
        });
    });
});

И из вашего ответа:

$(document).ready(function(){
    // load home page when the page loads
    $("#main_content_inner").load("home.html");

    $("#page1").click(function(){
        // load page1 in main_content_inner on click
        $("#main_content_inner").hide();
        $("#main_content_inner").load("page1.html", function(){
            $(this).fadeIn(5000);
        });
    });
    $("#page2").click(function(){
        // load page2 in main_content_inner on click
        $("#main_content_inner").hide();
        $("#main_content_inner").load("page2.html", function(){
            $(this).fadeIn(5000);
        });
    });
    $("#page3").click(function(){
        // load page3 in main_content_inner on click
        $("#content").hide();
        $("#content").load("page3.html", function(){
            $(this).fadeIn(5000);
        });
    });
});

Обратите внимание, что вы можете связывать вызовы функций, как демонстрирует lolwut, но я не уверен, что вы можете сделать это, не дожидаясь загрузки, чтобы сделать вашу анимацию.Поэтому я не уверен, что $('#id').hide().load().fadeIn() будет работать в случае медленной загрузки страницы, но $('#id').hide().load(url,[callback w/fadeIn()]) ожидает полной загрузки страницы, прежде чем сработает fadeIn ().

EDIT 2:

Из-за заявленной проблемы исходного плаката, заставляющей код работать, я создал html-файл, который я включил ниже, со страницей # .html, созданной для каждого.Приведенная ниже HTML-страница работает так, как я тестировал с помощью jquery 1.4.4.

<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    // load home page when the page loads
    $("#main_content_inner").load("home.html");

    $("#page1").click(function(){
        // load page1 in main_content_inner on click
        $("#main_content_inner").hide();
        $("#main_content_inner").load("page1.html", function(){
            $(this).fadeIn(5000);
        });
    });
    $("#page2").click(function(){
        // load page2 in main_content_inner on click
        $("#main_content_inner").hide();
        $("#main_content_inner").load("page2.html", function(){
            $(this).fadeIn(5000);
        });
    });
    $("#page3").click(function(){
        // load page3 in main_content_inner on click
        $("#content").hide();
        $("#content").load("page3.html", function(){
            $(this).fadeIn(5000);
        });
    });
});

</script>

</head>
<body>
<span id="page1">Page 1</span>
<span id="page2">Page 2</span>
<span id="page3">Page 3</span>
<h4>Main Content Inner</h4>
<div id="main_content_inner"></div>
<h4>Content</h4>
<div id="content"></div>
</body>
</html>
0 голосов
/ 18 февраля 2014

Обычно, если вы хотите выполнить переход, у вас уже должен быть HTML-код того, что вы хотите загрузить.Поскольку обратный вызов .load () уже меняет DOM, вы должны получить его другим способом.AJAX полезен здесь.

Рабочий пример: http://jsfiddle.net/v6S8Z/3/

$('#loader').click(function(){
    $.ajax({
        type: 'get',
        url: 'http://fiddle.jshell.net',
        success: function(response){
            $('#main').fadeOut(function(){
                $('#main').html(''); // clear the contents - do not chain this with the next .html()
                $('#main').html(response); // add new contents - do not chain the next hide() as the element must be parsed in the DOM correctly first
                $('#main').hide().fadeIn(6000); // hide the added content, then fade in
            });
        }

    });
});
  • загрузка страницы с помощью ajax при нажатии
  • исчезает существующий контент, как толькоajax завершен
  • .html () устанавливает содержимое и сразу скрывает страницы
  • .fadeIn () медленно исчезает на странице.

Это должнов основном так и будет.В настоящее время я работаю, поэтому я не могу дать вам подробный пример с правильными страницами настройки.Но я думаю, что вы поняли.

Если, однако, вы хотите CROSS-затухание содержимого в (ОЗУ) ТО ЖЕ Div, (например, содержимое A исчезает со 100 до 0, В то время как содержимое B исчезает с 0 до100) нет другого пути, кроме как построить HTML соответственно.Вам придется использовать 2 разные «основные» обертки, лежащие друг на друге.И вам нужно будет установить z-индекс для каждой загрузки, чтобы выбор текста продолжал работать.

Надеюсь, это поможет вам.:)

Я бы действительно рекомендовал сначала строить страницу статически, с двумя элементами содержимого друг над другом, переходя один в другой.В любом случае, это достаточно сложно, особенно если вы плохо разбираетесь в JS и CSS.Но как только вы все заработаете правильно, вы можете просто заполнить 2 деления с помощью .load () и использовать существующий код перехода.

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

...