Если 'X' div виден, 'Y' div скрыт. Если «X» Div скрыто, отображается «Y» div

Question

Я создаю веб-сайт и имею слайд-шоу. Слайд-шоу имеет подписи и имеет индекс, который накладывается на всю страницу. Когда наложение активировано, титры должны исчезнуть. И когда оверлей деактивирован, нажав кнопку выхода или ссылку на миниатюру или ссылку меню, надписи должны вернуться.

Это то, что я до сих пор

if($('#indexpage').css('display') == 'none'){ 
    $('#imageinfo').css('visibility') == 'visible'} 
    else { 
    $('#imageinfo').hide('slow'); 
    } 

Я не могу за жизнь мне, выяснить, как заставить его работать. Любая помощь была бы очень оценена.

спасибо,

Answer 1

if($('#indexpage').css('display') == 'none') 
$('#imageinfo').show('slow'); 
else 
$('#imageinfo').hide('slow'); 

Answer 2

вы можете использовать selector.is ("Видимый") как так:

if ($("#x").is(":visible")) { 
    $("#x").hide("slow"); 
    $("#y").show("slow"); 
} else 
    if ($("#y").is(":visible")) { 
     $("#y").hide("slow"); 
     $("#x").show("slow"); 
    } 

Live demo

Answer 3

Если предположить, что visibility ваш Cssclass попробуйте

$('#imageinfo').addClass('visibility').show('fast'); 

Answer 4

Учитывая ваше объяснение, во второй строке кода:

$('#imageinfo').css('visibility') == 'visible' 

, кажется, пытается установить свойство 'visibility' CSS, но что это на самом деле делает это сравнение текущего значения, связанного с этим значением со строкой 'visible' , и результат такого сравнения не используется ни для чего. Даже если вы заменили оператор сравнения равенства == с оператором присваивания =, он все равно будет неправильным, потому что нет смысла пытаться назначить возврат из этой функции, равный строке. Правильный синтаксис для изменений свойства выглядит следующим образом:

$('#imageinfo').css('visibility', 'visible'); 

Но вы также можете использовать .show() как противоположность .hide(). Итак:

if($('#indexpage').css('display') == 'none'){ 
    $('#imageinfo').show('slow'); 
} else { 
    $('#imageinfo').hide('slow'); 
} 

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

Answer 5

В коде, который управляет Отображение или скрытие одного элемента или другого, вы должны просто использовать .toggle():

$("#indexpage,#imageinfo").toggle(); 

Тогда каждый раз, когда .toggle() называется, тот, который виден будет скрыт, и тот, который скрыт, будет виден.

Это предполагает, что вы уже установили, что ваш css имеет один показ, а другой скрытый по умолчанию.Таким образом, CSS вашей страницы должен содержать:

#indexpage { 
    display: none; 
} 

Если это не работает для вас, и вы все еще хотите, чтобы показать или скрыть один в зависимости от того другой видна, используйте .toggle() пропусканием boolean, указывающий, показывать или скрывать элемент. Получите это логическое значение, используя .is() и :visible.

$("#imageInfo").toggle(!$("#indexpage").is(":visible")); 

Edit: Просто отметить, есть несколько причин, ваш пример не работает.

Во-первых, Вы, кажется, пытаетесь использовать .hide() с .css("visibility"). Но, .hide() устанавливает display элемента в none. Как только это будет установлено, значение visibility не будет иметь эффекта. Следствием .hide() является .show(). Но .toggle() может быть предпочтительным время от времени, поскольку он инкапсулирует функциональность как .hide(), так и .show(). Это особенно верно, если вы хотите показать или скрыть элемент в зависимости от определенного состояния. В этом случае передайте логическое значение .toggle(), указывающее, должен ли элемент быть видимым. Вы можете уменьшить свой код от этого:

if (checkSomeCondition()) { 
    $("#myElement").show(); 
} 
else { 
    $("#myElement").hide(); 
} 

Чтобы только одна строка кода:

$("#myElement").toggle(checkSomeCondition()); 

Во-вторых, другая причина ваш код неудачу в том, что вы оцениваете значение visibility вместо присвоения значения видимости. Оператор == является оператором равенства, который сравнивает два значения и возвращает логическое значение. Для того, чтобы присвоить значение, вам нужно использовать оператор присваивания (=):

var a = 1; 
a == 2; // returns false, a is unchanged 
a = 2; // now a is 2 

Но, вы бы не использовать оператор присваивания в этом случае, потому что вы не можете присвоить значение результата вызов функции. То есть, someFunction() = 1 недействителен JavaScript. В jQuery для чтения значения используется один аргумент. Для записи значения, необходимо передать второй аргумент, указывающий новое значение:

$('#imageinfo').css('visibility', 'visible'); 

Это исправляет синтаксис, но из-за первый выпуск выше, это не решает проблему - вам нужно установить display вместо visibility.

Answer 6

Если вы любите решения одной линии, вы можете попробовать:

$('#y').css('display', $('#x').is(':visible') ? 'none' : 'block'); 

Answer 7

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

http://www.catchmyfame.com/2010/08/31/jquery-hide-vs-fadeout-vs-animate/

Поскольку вы собираетесь использовать это в ряде различных сценариев, я хотел бы построить 2 функции, которые вы можете позвонить.

HideOverlay, который удаляет оверлей и делает индекс видимым.

ShowOverlay, который удаляет индекс и делает видимым наложение.

Внутри них вы можете иметь переключатели. Если вы скрываете индекс отдельно от наложения в других сценариях вашего сценария, выполните другую функцию и вызовите его из hideOverlay/showOverlay.

(Возможно, другие могут предложить создание единственной функции для скрытия/отображения наложения путем передачи истинной/ложной переменной, но мне нравится держать ее простой, пока я не знаю, что происходит, а затем уточняю ее, когда я полностью понимаю, как он работает)