Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by gyatmnucla
gyatmnucla
7,618 Points

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,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 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();
}
);
gyatmnucla
gyatmnucla
7,618 Points

It still flashes but more slowly...

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 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.

gyatmnucla
gyatmnucla
7,618 Points
gyatmnucla
gyatmnucla
7,618 Points

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