Saya mengkode teks fade-in dan fade-out pada tombol hover ... dan saya harus memanggil animasi onhover ... bagaimana saya bisa melakukannya?

const button = document.getElementById("btn");
const disp_text = document.getElementById('disp_text');

button.onmouseover = function(){
 //Here goes the animation to play
 disp_text.innerText = "Next";
}

Saya sudah Mencoba:

const button = document.getElementById("btn");
const disp_text = document.getElementById('disp_text');

button.onmouseover = function(){
 animation.Play("fadein");
 disp_text.innerText = "Next";
}

Tapi tidak ada...

Jika seseorang dapat membantu, saya akan sangat berterima kasih ...

1
IvanD1M4 13 Mei 2021, 13:48

3 jawaban

Jawaban Terbaik

.play() hanya akan berfungsi jika Anda telah menyebutkan caranya animate

const button = document.getElementById("btn");
const disp_text = document.getElementById('disp_text');

button.onmouseover = function(){
 disp_text.innerText = "Next";
 
 const animation = disp_text.animate(
[
  { opacity: 0 },
  { opacity: 1 }
], {
  easing: 'ease',
  duration: 2000
});

 animation.play();
}
<button id="btn">Hello</button>
<p id="disp_text"></p>
0
DEEPAK 13 Mei 2021, 11:20

Saya tidak yakin apa yang Anda maksud dengan "animation.fadeIn". Sepengetahuan saya, tidak ada objek bernama "animasi" di Vanilla JS.

Cara untuk membuat kode animasi fade-in dan fade-out adalah dengan menggunakan opacity properti CSS.

Jika Anda membuat kode animasi ini dalam CSS, Anda dapat melakukan:

#btn {opacity: 0.5; }
#btn:hover {opacity: 1} 

Beri tahu saya jika ini yang Anda butuhkan.

0
x1n0_ 13 Mei 2021, 11:28

Berikut beberapa kode yang menggunakan javascript untuk menganimasikan fade saat tombol di-hover. Saya juga telah menerapkan versi css murni. Saya akan mengimplementasikan versi menggunakan API Animate tetapi saya melihat bahwa @DEEPAK telah melakukannya, jadi itu adalah opsi ketiga.

const button = document.getElementById("btn");
const disp_text = document.getElementById('disp_text');


button.onmouseover = function(){
  disp_text.classList.add('button-hover');
}

button.onmouseout = function(){
  disp_text.classList.remove('button-hover');
}
#disp_text {
  opacity:0;
  transition: opacity .25s ease-in-out;
}
#disp_text.button-hover {
  opacity:1;
}

#disp_text2 {
  opacity:0;
  transition: opacity .25s ease-in-out;
}
#btn2:hover #disp_text2 {
  opacity:1;
}
<button id='btn'>Hover over this to see the animation of the DIV below</button>
<p id='disp_text'>Next</p>

<p>The one below uses css only - no javascript. This is easy because the span is inside the button</p>
<button id='btn2'><span id='disp_text2'>Next</span></button>
1
Chris Lear 13 Mei 2021, 11:24