Saat ini saya sedang mengerjakan sebuah proyek dan saya mengalami masalah dengan jQuery teks bagian pahlawan saya. Skenarionya adalah ketika halaman dimuat, teks seharusnya tidak terlihat tetapi ketika dimuat, teks akan muncul.

Ini kode CSS saya:

.hero_description{
  visibility: hidden;
}

Dan inilah jQuery saya:

jQuery(function($) {
    jQuery('.hero_description').show();
},2000);

Masalahnya adalah, itu tidak menunjukkan transisi yang tepat karena dirender pertama di atas, dan setelah gaya CSS lainnya dirender, ia pergi ke tempat yang tepat di tengah.

0
danedelions_swift 22 Oktober 2019, 18:45

2 jawaban

Jawaban Terbaik

Jika ingin ditampilkan dengan transisi, Anda harus menggunakan fadeIn() alih-alih show(). Pastikan juga untuk hide() elemen terlebih dahulu untuk mencegah kedipan apa pun.

jQuery('.hero_description').hide().fadeIn(2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
content above
<div class="hero_description">DESCRIPTION HERE</div>
content below
1
Constantin Groß 22 Oktober 2019, 15:57

Sangat sederhana

$('.hero_description').fadeIn(2000);

JS Fiddle

0
Markus Dresch 22 Oktober 2019, 16:57