Как добавить один <div>с помощью jQuery, а другой <div>? - PullRequest
Новая
       56

Как добавить один <div>с помощью jQuery, а другой <div>?

2 голосов
/ 30 апреля 2011

Я создаю свое портфолио и хочу создать галерею для отображения своих проектов.У меня есть выбор из семи элементов, содержащих контент, которые образуют раздел моего сайта с вкладками навигации.Как и в случае с другими навигациями с вкладками, только один элемент с содержимым будет активным одновременно.Однако, в отличие от других навигаций с вкладками, эта управляется PHP.Если определенное содержимое (в настоящее время настроено на функцию file_exists, но скоро будет управляться MySQL) доступно, div будет записано в навигацию, и будет отображена соответствующая ссылка.Если это не так, то ссылка будет скрыта, и div не будет записан.Необходимые файлы основаны на вызове $ _GET, и требуемые файлы различаются в зависимости от строки в моей переменной $ _GET.

Каждая вкладка имеет уникальный идентификатор.В настоящее время (так как я не являюсь экспертом по Javascript), у меня есть опция «сброс», которая устанавливает стиль всех именованных элементов div в «скрытый» стиль, прежде чем переводить выбранный элемент div в «видимое» состояние.

Что я хочу сделать, если это возможно, это:

Я хочу перейти от # div1 к # div2.Div 1, 2, 4 и 6 (для этого примера) активны.Я нажимаю на ссылку, которая говорит моей странице, что нужно отобразить # div2 (в настоящее время функция говорит только о том, чтобы скрыть ВСЕ div, а затем отображает # div2, скрытие всех других div - это отдельная функция, которая вызывается внутри этой функции).# div1 в настоящее время виден.

  1. # div1 исчезнет
  2. # div2 исчезнет

Div 4 и 6 не будут затронуты.Div 3, 5 и 7 не будут затронуты, так как они (что касается моей страницы) не существуют.В этом примере каждое затухание может занять 3 секунды.

Я смутно осознаю, что $ ('# div2'). FadeIn (3000);будет означать эффект затухания для # div2, а аналог fadeOut () будет означать затухание.Как мне использовать jQuery (у меня есть 1.5.2 на моем сайте) для постепенного исчезновения # div1 и исчезновения # div2 в БЕЗ влияния на любой другой div, или проще сохранить код, так как он скрывает все мои div ипросто исчезнуть # div2?Пожалуйста, помните, я не эксперт по Javascript, я только начинающий, поэтому, пожалуйста, не оскорбляйте длину моего сценария или мою неспособность понять что-то, что, я думаю, было бы так просто.

Пожалуйста, помните, чтоУ меня до семи дел в навигации.Сценарий должен найти элемент div, который виден на основе щелкающей ссылки, и затемнить его, затем добавить в выбранный элемент div, и он не должен касаться ни одного из оставшихся элементов div.

Это достаточно просто, чтобыпонять и получить ответ?

РЕДАКТИРОВАТЬ @ 01:46 GMT, 30/04/2010

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

У меня сейчас есть мой PHP-скриптсказать: «Если этот файл существует, то создайте этот div и примените к нему стиль visibleTab. В противном случае создайте его, но примените к нему стиль hiddenTab».Мой код Javascript (теперь jQuery) выглядит следующим образом: 

  function resetTabs() {
    $("#postersandprint").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
    $("#mobileapp").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
    $("#stylesheets").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
    $("#storyboards").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
    $("#motionpieces").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
    $("#interactives").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
    $("#developmentwork").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
  }

  function showTab(tabname) {
    resetTabs();
    $('#'+tabname).fadeIn(3000);
    $("#"+tabname).removeClass("hiddenTab").addClass("tabs visibleTab");
  }

Принцип таков:

Моя ссылка имеет щелчок, который вызывает мою функцию showTab и помещает соответствующий идентификатор div внутри функции.Например: 

<a href="javascript:;" onclick="showTab('mobileapp');">Link</a>

Функция скрывает все элементы div и затем исчезает в том, который называется 'tabname', в данном случае, 'mobileapp'.

Я уже говорилкаждая функция сброса удаляет любой класс с именем hiddenTab, а также любой класс с именами visibleTab и tabs перед добавлением класса hiddenTab как своего рода «отказоустойчивый» подход.Я также сказал своей функции showTab явно удалить класс «hiddenTab» из моей вкладки, который я хочу видеть, и добавить классы «вкладки» и «visibleTab».Я забыл, почему у меня есть два стиля, но я уверен, что причина придет ко мне.

Я хочу, чтобы мой скрипт jQuery знал, какой div виден, а какой нет из семи.# Div1 и # div2 были примером, но это мог быть любой div из выбора.Раньше, когда я использовал функцию document.getElementById, она работала отлично, я просто хотел добавить в скрипт постепенное исчезновение, чтобы он выглядел лучше.Теперь это работает, но только когда я перебираю div один раз.После этого он просто добавляет мой div под видимый, он не скрывает их.Я знаю, что что-то упустил, или я где-то напутал, но что я пропустил?Где я все испортил?

Ответы [ 5 ]

2 голосов
/ 30 апреля 2011

Хотя этот параметр не настроен на вкладках, надеюсь, этот пример jsfiddle немного вам поможет. [Изменить, теперь добавлено всего 4 деления, дождитесь окончания анимации, прежде чем нажимать следующую кнопку]

В основном он ищет в контейнере div видимый элемент, используя : видимый селектор

.eq(0) говорит, что нужно извлечь только первый видимый элемент из коллекции, которую возвращает селектор. Если видимых элементов нет, он просто выбирает первый элемент.

Затем он выбирает идентификатор для показа.

Вызывает обе анимации одновременно с: 

vis.fadeOut(speed);
next.fadeIn(speed);

Если вы хотите подождать, пока один из них исчезнет, ​​прежде чем исчезнуть следующий при использовании, используйте обратный вызов, упомянутый в других ответах.

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

В качестве альтернативы вы можете получить коллекцию скрытых элементов с помощью : hidden

Если вам нужен более прямой пример, вы можете опубликовать свой html, чтобы мы могли помочь с точными селекторами, которые лучше всего подходят.

1 голос
/ 30 апреля 2011

Может быть, это то, что вы хотите? 

  $('#div1').fadeOut('3000', function() {
       $('#div2').fadeIn();
  });
0 голосов
/ 30 июля 2014 
$("#button").click(function()
{
$("#div1").fadeOut("fast");
$("#div2").fadeIn("slow");
});

Этот код будет работать как нажатие кнопки, которое будет постепенно исчезать из div1, а затем медленно превращаться в другой div как div2.

0 голосов
/ 13 июля 2012

Я нашел этот jShowOff: плагин jQuery Content Rotator от Erik Kallevig - http://bit.ly/NgLRdb взглянуть на него, кажется довольно полезным ....

в настоящее время пытается установить его какмой сайт Joomla

0 голосов
/ 30 апреля 2011

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

$("#div1").fadeOut(1000, function(){
    $("#div2").fadeIn(1000);
});

Вот прогулка 

$("#div1").fadeOut(1000, function(){

Это говорит о том, что когда div с идентификатором "div1" будет обращен в течение 1000 миллисекунд (1 секунда) и после этого вызовет функцию. 

$("#div2").fadeIn(1000);

Это просто заставляет вас затухать в новой идее после , другая полностью исчезла. 

});

Просто закрывает все, что мы открыли.

Я думаю, что вас беспокоит то, что 

$("div").fadeOut(1000);

Исчезнет все div на странице, но если поставить хеш-метку и идентификатор, вы сможете идентифицировать определенный, например, его идентификатор "#div1"

Кроме того, вы устанавливаете его с атрибутом id: 

<div id = "div1"></div>
...