Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Try to show on hover

Hey everyone,

I try to do the same thing but hide and show on hover, this kinda work but it flashes so you can't easily read..

$(".spoiler span").hide();
//2 Add a button
$(".spoiler").append("<button>Reveal Spoiler !</button>")
//3 When button is pressed 
$("button").mouseenter( function () {
  //3.1 Show spoiler
  $(this).prev().show();
  //3.2 Get rid of the button
  $(this).hide();
});
$("button").mouseleave(function () {
  //3.1 Show spoiler
  $(this).prev().hide();
  //3.2 Get rid of the button
  $(this).show();
}
);

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,028 Points

Maybe you could try replacing your show and hide methods with fadeIn() and fadeOut();

The idea is you'll get more of a gradual transition between states so it's more like an animation than an instant switching on and off of the elements.

So something like this

$(".spoiler span").hide();
//2 Add a button
$(".spoiler").append("Reveal Spoiler !")
//3 When button is pressed 
$("button").mouseenter( function () {
  //3.1 Show spoiler
  $(this).prev().fadeIn();
  //3.2 Get rid of the button
  $(this).fadeOut();
});
$("button").mouseleave(function () {
  //3.1 Show spoiler
  $(this).prev().fadeOut();
  //3.2 Get rid of the button
  $(this).fadeIn();
}
);

It still flashes but more slowly...

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,028 Points

by flashes, do you mean that it switches between one state and the other really fast, even if you keep the mouse cursor in the same position?

Usually the best way to fix that would be to change the size of the elements "clickable" area using CSS but whether it's as simple as that I'm not sure.

Yes ! it switches between one state and the other really fast, but when used with fadeIn and Out it does the same thing more slowly