Изменение темы «тема» вместе с содержимым div

Я относительно новичок в jQuery, и в настоящее время у меня проблемы с переходами и содержимым AJAX.Изменение темы «тема» вместе с содержимым div

В основном 4 страницы, каждая со своей собственной «темой» (уникальное фоновое изображение с тонированным наложением DIV).

Я разместил код ниже. Это выглядит Право на меня, в теории. но, конечно, он не работает.

Замечания в коде объясняют процесс, который я хотел бы видеть.

 $(document).ready(function() { 

     // begin 'photography' theme transition 

    $('a.photography').click(function() { 

     // 1. these next two lines hide the content containers and their data 
    $('#contentCanvas_A').fadeOut().hide(); 
    $('#contentCanvas_B').fadeOut().hide(); 

    // 2. animate/fade the tint color for the #contentCanvas overlay 
    $('#Window').animate({ backgroundColor: "rgba('67,32,12,0.8')}, "slow"}); 


    // 3. seamless fade swap of the <body> background image possible? 
    $('body').css('background-image','url(bgimage-photography.jpg)').fadeIn("slow"); 


     // 4. Finally, fade in new content from external HTML file 
    $('#contentCanvas_A').stop().load("photography.html").delay(800).fadeIn("slow"); 


    });

... и это как ссылка HTML будет выглядеть:

<a class="photography" href="" title="online photo gallery">Photography</a>

Является ли это правильный/эффективный способ сделать это? Попытка использовать переменные, а символ «#», похоже, не работает.

Некоторые примечания:

Я попытался создать отдельный DIV, который имеет фоновое изображение, но я не мог заставить его, чтобы заполнить весь экран - это только показал первые 5 пикселей в верхней , Поэтому, как показано в коде, я пытаюсь изменить фоновое изображение для фактического элемента .

Файл "photography.html" (и другие подобные) содержит только DIV для собственного макета контента, ничего больше.

Я очень благодарен за руководство. Спасибо всем!

источник

2012-01-29 relativelycoded

Вам нужно объяснить, что именно не работает. И обязательно используйте абсолютные пути при смене фоновых изображений в JS. – maxedison

Когда я нажимаю на ссылку, она просто перезагружает текущую страницу без изменений (без выцветания, без изменения цвета, ничего) вместо запуска функции jquery, как и ожидалось. Сам скрипт отлично работает; Я проверил консоль ошибок, и мой jQuery синтаксически корректен. Изменено URI на абсолютные пути, но это не имеет значения. – relativelycoded

Вам необходимо предотвратить действие по умолчанию, когда вы нажимаете <a>. Просто изменить первую строку кода следующим образом:

$('a.photography').click(function(e) {

Обратите внимание на e внутри function(e).

Тогда, в пределах эта функция, класть e.preventDefault();. Это может происходить в любом месте внутри функции обработчика кликов.

Edit - В ответ на замечание на моем ответ: Я не 100% уверены, почему вы получаете эту проблему, но я вижу одно место, где ваш код имеет вопрос:

$('#contentCanvas_A').fadeOut().hide();

Когда вы сделаете это, метод hide() запускается сразу же после того, как метод fadeOut() называется, в отличие от ждет для метода fadeOut до конца. Все методы анимации jQuery позволяют вам передать функцию «обратного вызова», которая будет выполнена после завершения метода анимации. Например:

$('#contentCanvas_A').fadeOut(250, function(){ 
    alert('fadeOut finished!'); 
});

Если вы сделаете это, вы увидите элемент исчезать и когда она полностью исчезла, вы получите уведомление. В стороне, нет необходимости звонить hide() здесь, потому что fadeOut() действительно делает это для вас в самом конце.

Основная часть вашего кода, который должен положить внутри этой функции обратного вызова (если предупреждение есть) является последней строкой:

$('#contentCanvas_A').stop().load("photography.html").delay(800).fadeIn("slow");

И как только вы поместите его внутри этой функции обратного вызова, вы можете обнаружить, что вам больше не нужен вызов метода delay(), потому что вся строка уже ждет завершения начального fadeOut перед выполнением.

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

источник

2012-01-30 02:39:26 maxedison

Почти идеальный! Спасибо за это. Единственная проблема, с которой я столкнулся сейчас, заключается в том, что я должен дважды щелкнуть, чтобы запустить всю функцию. Когда я нажимаю первый раз, содержимое исчезает, но затем я должен щелкнуть второй раз, чтобы изменить фоновое изображение и отобразить новый контент. Я думаю, что это связано с порядком моих анимаций, но я не уверен, с чего начать. Цвет оверлея фона не меняется, но я предполагаю, что это связано с ошибкой с моей стороны в реализации плагина цвета. – relativelycoded

Еще одно примечание, которое нужно добавить, - это не забыть ваши «обратные вызовы» для таких вещей, как «fadeout» и «animate». Пример: если вы хотите, чтобы эти первые две вещи лучше отображали замирание один за другим, вместо того, чтобы листинга после друг друга, попробуйте '$ ('# contentCanvas_A'). FadeOut (function (event) {$ ('# contentCanvas_B') .исчезать() }); // не нужно использовать .hide, fadeout скроет его: ' – SpYk3HH

one mor thing, если вы хотите, чтобы они исчезли примерно в одно и то же время, используйте« setTimeout »как таковой,' setTimeout (function() {$ ('# contentCanvas_A ') .fadeOut();}, 1); // 1 milisecond ждет, чтобы поймать другой '' $ (' # contentCanvas_B '). fadeOut(); // нет времени ожидания, чтобы ездить с первым' – SpYk3HH

Изменение темы «тема» вместе с содержимым div

ответ

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