Использование .load() с fadeIn() для замены содержимого

Хорошо, я пробовал несколько разных подходов, ни один из которых меня не удовлетворил, поэтому я пришел спросить.

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

Я новичок в Javascript, но нашел вещь .replaceWith(). Теперь я делал различные маневры с источником, но просто не мог заставить его работать. Что я пробовал, так это использовать .click(), выполнить .replaceWith() и заставить его заменить на fadeOut() текущий контент и fadeIn() на новый.

В одном из кодов, которые я написал, он успешно заменял содержимое, исчезая, но когда пользователь щелкал второй раз по навигационной ссылке, содержимое удваивалось и утраивалось.

Каков наилучший способ сделать плавный эффект постепенного появления и исчезновения #content-replaceing?


person user743880    schedule 08.05.2011    source источник
comment
возможный дубликат Затемнение div с содержимым A и Fade In того же div с содержимым B   -  person    schedule 08.05.2011


Ответы (1)


Сначала вам нужно скрыть его, иначе fadeIn не будет иметь никакого эффекта.

Живой пример.

В вашем случае вам, вероятно, потребуется использовать метод jQuery get для загрузки содержимого разных страниц.

person Shadow Wizard Wearing Mask V2    schedule 08.05.2011