Jadi, saya akan menjelaskan dengan jelas, saya ingin menghidupkan daftar, ketika saya mengklik artikel misalnya, ini menyembunyikan semua elemen lainnya dan hanya menampilkan semua artikel yang terkait dengan klik

Konten itu saling menggantikan dibandingkan di awal yang merupakan ciri dari blok tampilan/tidak ada.

Tapi saya tidak bisa menganimasikan ini jadi jika Anda punya solusi, saya ambil!

Saya tidak peduli dengan animasinya, saya ingin memahami prinsipnya.

Terima kasih

0
KolaCaine 29 Agustus 2017, 18:52

2 jawaban

Jawaban Terbaik

Anda dapat menyembunyikan elemen menggunakan jQuery seperti bdalina menyarankan dan menampilkan satu-satunya article yang diklik.

// Hides all articles but the one clicked.
$('article').click(function(){
	$('article').slideUp();
  $(this).slideDown();
});
body {
  font-family: sans-serif;
  background: #003B93;
}

section {
  width: 200px;
  margin: 20px auto;
}

article {
  cursor: pointer;
  margin-bottom: 20px;
  text-align: center;
  background: #BABABA;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  width: 150px;
  padding: 20px;
  border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <article>First article.</article>
  <article>Second article.</article>
  <article>Third article.</article>
  <article>Fourth article.</article>
  <article>Fifth article.</article>
</section>

Harap lihat juga jawaban ini, itu menunjukkan pendekatan lain untuk masalah ini.

Semoga ini bisa membantu dalam beberapa cara.

3
csalmeida 29 Agustus 2017, 16:24

Sayangnya, tapi animasi antara block dan none tidak mungkin.

Sebagai gantinya, Anda dapat menggunakan animasi dua langkah dengan opacity.

Berikut ini contoh dengan bias css.

HTML:

...
<div class="block opacity hidden">...</div>
...

CSS (jangan lupa tambahkan transition):

.block {
  display: block;
  opacity: 1;
}

.block.opacity {
  opacity: 0;
}

.block.hidden {
  display: none;
}

JQuery:

$('.block').removeClass('hidden'); // the block is still invisible
setTimeout( function() {
  $('.block').removeClass('opacity'); // now the block is visible
}, 100); // small delay is needed, better if it's equal the transition time

Itu mudah. Sebagai alternatif, Anda dapat menggunakan metode .fadeIn() dan .fadeOut() atau .animate().

UPD

Anda harus ingat bahwa batas waktu dalam fungsi kebalikan harus sama dengan durasi transition, atau elemen akan disembunyikan sebelum akhir animasi.

$('.block').addClass('opacity');
setTimeout( function() {
  $('.block').addClass('hidden');
}, 100);

UPD2

J:

var el = document.getElementsByClassName('block');
el.classList.remove('hidden');
setTimeout( function() {
  el.classList.remove('opacity');
}, 100);
1
voloshin 30 Agustus 2017, 05:40