скриване на един 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