jQuery if statement to check visibility

Question

Sto provando a scrivere uno script che nasconde/mostra div a seconda della visibilità di altri elementi. L'azione dovrebbe aver luogo quando clicco su un altro elemento. Ecco quello che ho scritto finora:

$('#column-left form').hide(); 
    $('.show-search').click(function() { 
     $('#column-left form').stop(true, true).slideToggle(300); 
     if($('#column-left form').css('display') == 'none') { 
      $("#offers").show(); 
     } else { 
      $('#offers').hide(); 
     } 
    }); 

nasconde la div, ma non torna quando mi nascondo la forma. Sarà grato per qualsiasi aiuto :)

edit:

Ok, sono riuscito a achive l'effetto desiderato scrivendo questo:

$('#column-left form').hide(); 
    $('.show-search').click(function() { 
     if ($('#column-left form').is(":hidden")) { 
      $('#column-left form').slideToggle(300); 
      $('#offers').hide(); 
     } else { 
      $('#column-left form').slideToggle(300); 
      $("#offers").show(); 
     } 
    }); 

Non so se è scritto correttamente, ma funziona;) Grazie a tutti per l'aiuto!

Answer 1

È possibile utilizzare .is(':visible') per verificare se qualcosa è visibile e .is(':hidden') al banco di prova per il contrario:

$('#offers').toggle(!$('#column-left form').is(':visible')); // or: 
$('#offers').toggle($('#column-left form').is(':hidden')); 

Riferimento:

• http://api.jquery.com/is/
• http://api.jquery.com/visible-selector/
• http://api.jquery.com/hidden-selector/

Answer 2

provare

if ($('#column-left form:visible').length > 0) { ... 

Answer 3

$('#column-left form').hide(); 
$('.show-search').click(function() { 
    $('#column-left form').stop(true, true).slideToggle(300); //this will slide but not hide that's why 
    $('#column-left form').hide(); 
    if(!($('#column-left form').is(":visible"))) { 
     $("#offers").show(); 
    } else { 
     $('#offers').hide(); 
    } 
    }); 

Answer 4

Sì, è possibile utilizzare .is(':visible') in jQuery. Ma mentre il codice è in esecuzione con il browser safari .is(':visible') non funzionerà.

Quindi, si prega di utilizzare il codice qui sotto

if($(".example").offset().top > 0) 

La linea di cui sopra funzionerà sia IE e Safari anche.

Answer 5

Dopo aver sistemato un problema di prestazioni connessi con l'uso di .is (": visibili"), mi sento di raccomandare contro le risposte di cui sopra e di utilizzare invece il codice di jQuery per decidere se un singolo elemento è visibile:

$.expr.filters.visible($("#singleElementID")[0]); 

Ciò che è .is è controllare se un insieme di elementi si trova all'interno di un altro insieme di elementi. Quindi cercherai il tuo elemento nell'intero insieme di elementi visibili sulla tua pagina. Avere 100 elementi è abbastanza normale e potrebbe richiedere alcuni millisecondi per cercare attraverso la matrice di elementi visibili. Se stai creando un'app web probabilmente ne hai centinaia o forse migliaia. La nostra app a volte prendeva 100ms per $ ("selettore #"). È (": visible") poiché stava verificando se un elemento si trovava in una matrice di 5000 altri elementi.

Answer 6

se visibile.

$("#Element").is(':visible'); 

se è nascosto.

$("#Element").is(':hidden');