2012-05-14 5 views
0

Я пытаюсь получить веб-сайт AJAX с jquery.address плагинымJQuery Адреса - Анимация содержания

, если вы посмотрите на http://www.idbranding.nl глубокое структурирование прекрасно работает.

Единственная проблема в том, что я не могу достигнуть экран загрузки Двойники как: http://www.nerisson.fr/ (также использует jquery.address плагин)

Так что мой вопрос, не кто-нибудь знает, как оживить содержание (Затухание/FadeIn) и показать/скрыть экран загрузки? Я думаю, что это не сложно, но документация jquery.address ограничена, когда дело доходит до анимации.

Вот мой код:

function loadURL(url) { 
    console.log("loadURL: " + url); 
    $("#content").load(url); 
}  

// Event handlers 
$.address.init(function(event) { 
    console.log("init: " + $('[rel=address:' + event.value + ']').attr('href')); 
}).change(function(event) { 
    $("#content").load($('[rel=address:' + event.value + ']').attr('href')); 
    console.log("change"); 
}) 

$('a').click(function(){ 
    loadURL($(this).attr('href')); 
}); 

ответ

1

может быть что-то вроде этого, как функция нагрузки:

$("#content").fadeOut("fast", function() { //block of code to be executed when page is faded out 
    $("#loadingPlaceholder").fadeIn("fast"); // fade in placeholder (e.g. loading image) 
    $.get(url, function(data){ // get the data and if data has been loaded... 
     $("#loadingPlaceholder").fadeOut("fast"); // fade out placeholder 
     $("#content").empty().html(data).fadeIn("fast"); // empty the innerHTML (--> prevents "flickering"), insert the loaded data and fade in again 
    }); 
}); 

Кроме того, я бы не использовать функцию click(), как вы хотели бы, чтобы применить его к любому новые ссылки (которые могут быть загружены) -> использовать делегат/вкл (не знаю, какую версию jQuery вы используете);)

Для более подробного примера проверьте мою версию sion https://github.com/peter-m/blueprint/blob/master/js/pushState.js

+0

Прежде всего, я очень благодарен за вашу помощь. Это начало, теперь я должен реализовать в текущем jquery.settings.js Ваш пример github выглядит неплохо, но способ сделать код для меня очень ... – idbranding

+0

then ..? Если нет «тогда», не могли бы вы отметить вопрос как ответ? :) – Peter

+0

Мне жаль, что я нажал кнопку ввода, пока мой комментарий еще не закончен. Любые предложения о том, как должен выглядеть полный код (с jquery.address.settings? Я не уверен, где разместить ваши код в мой текущий код – idbranding

Смежные вопросы