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
gyatmnucla
7,618 PointsTry 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
Treehouse Moderator 91,252 PointsMaybe 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
7,618 PointsYes ! it switches between one state and the other really fast, but when used with fadeIn and Out it does the same thing more slowly
gyatmnucla
7,618 Pointsgyatmnucla
7,618 PointsIt still flashes but more slowly...
Jonathan Grieve
Treehouse Moderator 91,252 PointsJonathan Grieve
Treehouse Moderator 91,252 Pointsby 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.