periksa jQuery jika elemen kelihatan/tersembunyi

$('#myDiv:visible').animate({left: '+=200px'}, 'slow');

Bagaimana menggunakan jQuery untuk memeriksa sama ada elemen dapat dilihat?

JQuery menyediakan beberapa cara untuk memeriksa sama ada unsur -unsur di laman web dapat dilihat. Kaedah yang paling biasa ialah menggunakan pemilih ": kelihatan". Pemilih ini mengembalikan benar jika elemen dapat dilihat, atau palsu jika elemen tidak dapat dilihat. Berikut adalah contoh mudah:

if ($("#element").is(":visible")) {
  // 元素可见
} else {
  // 元素不可见
}

Apakah perbezaan antara ": tersembunyi" dan ": kelihatan" pemilih dalam jQuery?

dalam jQuery, ": tersembunyi" dan ": kelihatan" adalah dua pemilih yang bertentangan. ": kelihatan" pulangan benar jika elemen dapat dilihat, jika tidak, pulangan palsu. ": Tersembunyi" mengembalikan benar jika elemen tersembunyi, jika tidak, pulangan palsu. Harus diingat bahawa jika CSS elemen ditetapkan untuk "Paparan: Tiada", atau bersarang dalam elemen yang ditetapkan untuk "Paparan: Tiada", pemilih ini akan mempertimbangkan elemen yang tersembunyi.

Bolehkah saya menggunakan jQuery untuk menyembunyikan atau memaparkan elemen?

Ya, jQuery menyediakan

kaedah untuk menyembunyikan atau memaparkan elemen masing -masing. Berikut adalah contoh: hide() show()

$("#element").hide(); // 这将隐藏元素
$("#element").show(); // 这将显示元素

anda boleh menggunakan pemilih ": tersembunyi" untuk memeriksa sama ada elemen tersembunyi. Berikut adalah contoh:

Apakah fungsi fungsi

if ($("#element").is(":hidden")) {
  // 元素隐藏
} else {
  // 元素未隐藏
}

dalam pemeriksaan jQuery sama ada salah satu elemen yang dipilih sepadan dengan pemilih. Jika ia sepadan, fungsi itu kembali benar; is()

is() Ya, anda boleh menggunakan jQuery untuk memeriksa sama ada elemen dapat dilihat pada skrin. Walau bagaimanapun, ini memerlukan kod yang lebih kompleks, kerana anda perlu mempertimbangkan kedudukan tatal dan saiz viewport. Berikut adalah contoh:

function isOnScreen(element) {
  var elementTop = $(element).offset().top;
  var elementBottom = elementTop + $(element).outerHeight();
  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  return elementBottom > viewportTop && elementTop < viewportBottom;
}

Bolehkah saya menggunakan jQuery untuk memeriksa sama ada elemen itu dapat dilihat? toggle()

$("#element").toggle();

Apakah fungsi fungsi

Fungsi

function isPartiallyVisible(element) {
  var elementTop = $(element).offset().top;
  var elementBottom = elementTop + $(element).outerHeight();
  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  return elementTop < viewportBottom && elementBottom > viewportTop;
}

Bagaimana menggunakan jQuery untuk memeriksa sama ada elemen kelihatan sepenuhnya?

Anda boleh menggunakan jQuery untuk memeriksa sama ada elemen dapat dilihat sepenuhnya dengan menggunakan fungsi offset(), outerHeight() dan scrollTop() dalam kombinasi. Berikut adalah contoh:

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');
alert(isVisible);
alert(isHidden);