скрыть один div, когда другой отображается в jQuery?

Я пытаюсь скрыть div, когда виден другой.

У меня есть div 1 и div 2.

Если отображается div 2, то div 1 должен быть скрыт, а если div 2 не отображается, то div 1 должен быть видимым/отображаемым.

Функция должна быть готова к функции/документу при загрузке страницы.

Я пробовал это, но мне не повезло, может кто-нибудь показать мне, как я могу это сделать.

<script>
    window.onLoad(function () {
        if ($('.div2').is(":visible")) {
             $(".div1").fadeOut(fast);

        } else if ($('.div2').is(":hidden")) {
            $('.div1').fadeIn(fast);

        }
    });
</script>

javascript jquery fadein fadeout
person Eric Johnson    schedule 04.02.2013    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Добавьте класс hidden в каждый div, а затем переключайтесь между этим классом с помощью jQuery. Кстати, window.onload не является функцией, она ожидает строку типа window.onload = function() {}. Также поставьте fast в кавычки. Я не знаю, является ли это требуемым, но так говорит jQuery.

<div class="div1"></div>
<div class="div2 hidden"></div>

.hidden { display: none }

$(document).ready(function() {

    if($(".div1").hasClass("hidden")) {
        $(".div2").fadeIn("fast");
    }

    else if($(".div2").hasClass("hidden")) {
        $(".div1").fadeIn("fast");
    }

});
person ModernDesigner    schedule 04.02.2013

arrow_upward
0
arrow_downward

Вы должны передать строку методам .fadeIn() и .fadeOut().

Вместо .fadeIn(fast) будет .fadeIn("fast"). То же самое для .fadeOut().

И вообще, поскольку вы уже используете jQuery, лучше обернуть свой код следующим образом:

$(function () {
    // Code goes here
});
person Robin van Baalen    schedule 04.02.2013

arrow_upward
0
arrow_downward

Похоже, вы используете селекторы jquery (библиотека javascript). Если вы собираетесь использовать jquery, убедитесь, что библиотека загружена правильно, включив ее в заголовок документа (Google упрощает это, размещая ее для вас
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>)

С загруженным jQuery вы можете сделать это так

$(document).ready(function(){
if ($('.div1').is(":visible")) {
$('div2').hide();
}

else if ($('.div2').is(":visible")) {
$('div1').hide();
}

});

РАБОЧИЙ ПРИМЕР: http://jsfiddle.net/HVDHC/ — просто измените отображение :none из div 2 в div 1 и нажмите «Выполнить», чтобы увидеть его чередование.

person James    schedule 04.02.2013
comment
Я считаю, что хостинг jQuery безопаснее, проще и надежнее http://code.jquery.com/jquery.min.js Он загружает самую последнюю и самую маленькую версию. URL-адрес также намного короче. - person ModernDesigner; 04.02.2013
comment
Хороший совет! Я просто всегда пользовался Google, так как считал его более надежным. - person James; 04.02.2013

arrow_upward
0
arrow_downward

Вы можете использовать setTimeout или setInterval, чтобы отслеживать, существуют ли эти div.

$(function() {
  var interval = window.setInterval(function() {
    if($('#div2').hasClass('showing')) {
      $('#div1').fadeOut('fast');
    }      
    if($('#div2').hasClass('hidden')) {
      $('#div1').fadeIn('fast');
    }
  }, 100);

  // when some time u don't want to track it
  // window.clearInterval(interval)
})

для лучшей производительности

var div1 = $('#div1')
  , div2 = $('#div2')


var interval ....
// same as pre code
person KiddKai    schedule 04.02.2013