Mit jQuery erkennen, ob ein Element sichtbar ist

Question

Verwendung von .fadeIn() y .fadeOut() Ich habe ein Element auf meiner Seite ein-/ausgeblendet, aber mit zwei Schaltflächen, eine zum Ausblenden und eine zum Einblenden. Ich möchte nun Folgendes haben un Taste zum Umschalten zwischen ambos .

Mein HTML / JavaScript wie es ist:

<a onclick="showTestElement()">Show</a>
<a onclick="hideTestElement()">Hide</a>

function showTestElement() {
  $('#testElement').fadeIn('fast');
}

function hideTestElement() {
  $('#testElement').fadeOut('fast');
}

Mein HTML/JavaScript, wie ich es gerne haben möchte:

<a onclick="toggleTestElement()">Show/Hide</a>

function toggleTestElement() {
  if (document.getElementById('testElement').***IS_VISIBLE***) {
    $('#testElement').fadeOut('fast');
  } else {
    $('#testElement').fadeIn('fast');
  }
}

Wie kann ich feststellen, ob das Element sichtbar ist oder nicht?

Answer 1

Sie suchen nach:

.is(':visible')

Obwohl Sie wahrscheinlich Ihren Selektor ändern sollten, um jQuery zu verwenden, wenn man bedenkt, dass Sie es sowieso an anderen Stellen verwenden:

if($('#testElement').is(':visible')) {
    // Code
}

Es ist wichtig zu beachten, dass, wenn eines der übergeordneten Elemente eines Zielelements ausgeblendet ist, dann .is(':visible') auf das Kind wird zurückkehren false (was sinnvoll ist).

jQuery 3

:visible hat den Ruf, ein recht langsamer Selektor zu sein, da er den DOM-Baum durchqueren muss, um eine Reihe von Elementen zu untersuchen. Es gibt jedoch gute Nachrichten für jQuery 3, da diese Stelle erklärt ( Ctrl + F pour :visible ):

Dank der detektivischen Arbeit von Paul Irish bei Google konnten wir einige Fälle identifizieren, in denen wir einen Haufen zusätzlicher Arbeit überspringen konnten, wenn benutzerdefinierte Selektoren wie :visible mehrmals im selben Dokument verwendet werden. Dieser spezielle Fall ist jetzt bis zu 17 Mal schneller!

Denken Sie daran, dass selbst mit dieser Verbesserung Selektoren wie :visible und :hidden teuer sein können, weil sie vom Browser abhängen, um festzustellen, ob Elemente tatsächlich auf der Seite angezeigt werden. Das kann im schlimmsten Fall eine komplette Neuberechnung der CSS-Stile und des Seitenlayouts erfordern! Wir raten zwar in den meisten Fällen nicht von ihrer Verwendung ab, empfehlen aber, Ihre Seiten zu testen, um festzustellen, ob diese Selektoren Leistungsprobleme verursachen.

---

Um Ihren speziellen Anwendungsfall noch weiter zu vertiefen, gibt es eine integrierte jQuery-Funktion namens $.fadeToggle() :

function toggleTestElement() {
    $('#testElement').fadeToggle('fast');
}

Answer 2

Das ist nicht nötig, verwenden Sie einfach fadeToggle() auf das Element:

$('#testElement').fadeToggle('fast');

Hier ist eine Demo.

Answer 3

if($('#testElement').is(':visible')){
    //what you want to do when is visible
}