在jQuery中显示另一个div时隐藏一个div？

Question

I am trying to hide a div when another one is visible.

I have div 1 and div 2.

If div 2 is showing then div 1 should hide and if div 2 is not showing then div 1 should be visible/unhide.

The function would need to be function/document ready upon page load.

I've tried this but I'm not having any luck, can someone please show me how I can do this.

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

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

        }
    });
</script>

Answer 1

Add a class of hidden to each div, then toggle between that class using jQuery. By the way, window.onload is not a function, it expects a string like window.onload = function() {} . Also, put fast in quotations. I don't know if that's required , but that's how jQuery says to do it.

<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");
    }

});

Answer 2

You should pass a string to the .fadeIn() and .fadeOut() methods.

Instead of .fadeIn(fast) it'll be .fadeIn("fast") . Same for .fadeOut() .

And in general since you're already using jQuery it's better to wrap your code like this:

$(function () {
    // Code goes here
});

Answer 3

You can use setTimeout or setInterval to track if these divs exists

$(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)
})

for better performance

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


var interval ....
// same as pre code

Answer 4

It looks like you're using jquery selectors (a javascript library). If you're going to use jquery make sure the library is loaded properly by including it in the document header (google makes this easy by hosting it for you
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> )

With jQuery loaded you can do it like this

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

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

});

WORKING EXAMPLE : http://jsfiddle.net/HVDHC/ - just change display:none from div 2 to div 1 and click 'run' to see it alternate.