I'm trying to use jQuery to reveal a hidden div by hovering over an another div. The hidden div should keep occupying its space always. This works fine when using visibility, like this:
$('.frase-1').mouseenter(function() {
$('.field-1').css('visibility', 'visible');
});
$('.frase-1').mouseleave(function() {
$('.field-1').css('visibility', 'hidden');
});
But I would like to use a fadeIn/fadeOut-effect, like this:
$('.frase-2').mouseenter(function() {
$('.field-2').fadeIn(500);
});
$('.frase-2').mouseleave(function() {
$('.field-2').fadeOut(500);
});
The problem with the latter solution is that the hidden div will be set to display:none, and this will alter the layout and flow of the page. I found an answer that suggested solving this by using animate({transparency}), like this:
$('.frase-3').mouseenter(function() {
$('.field-3').animate({opacity:1});
});
$('.frase-3').mouseleave(function() {
$('.field-3').animate({opacity:0});
});
This works only half: the hidden div is visible (where it shouldn't) when the page is loaded, and only disappears for the first time when hovered.
fadeTo is also suggested a number of times, but that seems to have cross-platform problems, so I didn't use it.
I've put all three solutions in this fiddle - is there anyone with a suggestion how to solve this?
Thanks!
