Fmdpa Posted November 27, 2010 Share Posted November 27, 2010 Here's the HTML: <img ... class="post_img" /><div class="post_info_container"><div class="post_info">5 comments | Rating: 2</div></div> The divs are initially hidden, but the first div ("post_info_container") is set to the height/width of the image, and positioned absolutely above it (no pun intended). The post_info div is a smaller div inside the other. The idea is to have the "post_info_container" fadein as the overlay for the image, and of course the child div ("post_info") fades in with it. But I've exhausted the options for fading out these divs. The callback function for the hover event doesn't work because when the divs fadein, it will automatically trigger the callback function since the divs, when they fade in, are between the cursor and the image. I tried triggering a fadeout function on "post_info_container" mouseout, but that executes even when I hovered over the "post_info" div. I'm stumped. Any ideas? Link to comment Share on other sites More sharing options...
ApocalypeX Posted November 27, 2010 Share Posted November 27, 2010 Here's the HTML:<img ... class="post_img" /><div class="post_info_container"><div class="post_info">5 comments | Rating: 2</div></div> The divs are initially hidden, but the first div ("post_info_container") is set to the height/width of the image, and positioned absolutely above it (no pun intended). The post_info div is a smaller div inside the other. The idea is to have the "post_info_container" fadein as the overlay for the image, and of course the child div ("post_info") fades in with it. But I've exhausted the options for fading out these divs. The callback function for the hover event doesn't work because when the divs fadein, it will automatically trigger the callback function since the divs, when they fade in, are between the cursor and the image. I tried triggering a fadeout function on "post_info_container" mouseout, but that executes even when I hovered over the "post_info" div. I'm stumped. Any ideas? Add the mouse out event after the mouse over has been triggered? So after the fade in is complete you do a callback function to add the event. And then maybe when that's done it removes the mouse over event until the mouse out has been executed. You could use variable for the classes so it would be like:mover = "post_info_container";mout = "blah";$("."+mover).mouseOver(function(){ $(".post_info_container").fadeIn(400, function(){ mover = "blah"; // or anything to throw it off the right element mout = "post_info_container"; });});$("."+mout).mouseOut(function(){ $(".post_info_container").fadeOut(400, function(){ mover = "post_info_container"; mout = "blah"; // or anything to throw it off the right element });}); I'm just thinking out loud... Link to comment Share on other sites More sharing options...
dsonesuk Posted November 27, 2010 Share Posted November 27, 2010 Have you tried using an outer div container to trigger the fade in and fade out, this also would control the position absolute elements when give position: relative. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script> <script type="text/javascript"> /*<![CDATA[*//*---->*/ $(document).ready(function() { $(".post_info_container").hide(); $(".outer").hover(function () { $(this).children(".post_info_container").fadeIn("slow").children(".post_info").fadeIn("slow");; }, function(){ $(this).children(".post_info_container").fadeOut("slow").children(".post_info").fadeOut("slow"); }); }); /*--*//*]]>*/ </script> <style type="text/css"> .outer { position:relative; width: 296px; height:221px; cursor: pointer;} .post_info_container { position:absolute; top:0; left:0; height:100%; width:100%;} .post_info_container div{ position:absolute; bottom:0; right:20px;} </style> </head> <body> <div class="outer"> <img src="../images/alien/1cha_imgash.jpg" class="post_img" /> <div class="post_info_container"> <div class="post_info">5 comments | Rating: 2</div> </div> </div> </body> </html> Link to comment Share on other sites More sharing options...
Fmdpa Posted November 27, 2010 Author Share Posted November 27, 2010 Dsonesuk, I'll try your suggestion. It looks like it would work. I tried an outer div, but it wasn't placed quite like that. I think this would work! Link to comment Share on other sites More sharing options...
Fmdpa Posted November 28, 2010 Author Share Posted November 28, 2010 It worked, and I found out a valuable piece of information: ids actually act differently than class names. I knew before the you should use ids for singularly, and class names can be used multiple times, but I didn't realize that they actually act differently. In my case, I had the HTML I posted above in a list of about 10 items. The fadein/fadeout thing didn't work on any other elements than the first one when I had an id trigger the function. When I changed it to class, it worked perfectly! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.