Creating a .animate "fadeIn" w.o removing the whol
Ok pretty much im trying to get it done. Tho if you do know of an existing solution or have any other ideas - Do feel free to leave a comment.
1. fadeIn/fadeOut removes the entire block
2. So .animate comes in to plays with the opacity setting
3.
However, if there is something that you want to remain hidden until the user mouses over it, then animate(opacity) tends to give it away cos it
only animates once the dom is loaded.
4. The solution works like this:
4a. Create a div tag with the CSS setting on "visibility: hidden"
4b. Place your div tag on the html
4c. Get jQuery .animate to
change the opacity of the div while it is
still under the css proper "hidden"
4d. Finally when user mouses over - The setting is such that the jQuery
firsts sets the div to "visibility: visible" then moves on animating
the opacity of the div so that it "fadesIn".
Ok here is the code. It's a little buggy tho.
CSS
====================
div#coffee { height: 100px; width: 100px; background-image: url(..);
VISIBILITY: HIDDEN }
div#coffeeHolder { height: 100px; width:100px;}
====================
HTML
====================
<div id="coffeeHolder">
<div id="coffee"> </div> </div>
====================
jQuery
===================
$(document).ready(function(){
$("div#coffee").animate({opacity: 0});
$("div#coffeeHolder").mouseover(function () {
$("div#coffee").css({"visibility":"visible"}),
$("div#coffee").stop().animate({opacity: 1.0}, 1000)
});
$("div#coffeeHolder").mouseout(function () {
$("div#coffee").stop().animate({opacity: 0.0}, 1000)
});
});
===================
Ok here we go. It does work for me. Tho if anyone would like to help polish it up it would be great.
Do leave a comment if you have any ideas/comments/questions.
Cheerio.