css - Goofy Toggle Issue with JQuery -
i attempting create grid of 9 tiles - serve home page navigation. desired effect here have each tile link (obviously) has semi-transparent background , opaque text (obviously) fade on tile on mouseenter - , fade out on mouseleave.
i have created desired effect (minus fade) in css (scss - actually). leave hard coded css if possible - fallback if user has javascript turned off. think causing issue.
mouseenter works fine - mouseleave fades out text, , fades right in. how can prevent this? code below:
html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>lauren barge photography</title> <link rel="stylesheet" type="text/css" href="common/css/main.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.home_tile_text').hide().removeclass('text').addclass('text-js'); //$('.home_tile_overlay').hide().removeclass('text').addclass('text-js'); $('.home_tile').mouseenter(function(){ $(this).find('.text-js').fadetoggle(); }); $('.home_tile').mouseleave(function(){ $(this).find('.text-js').fadetoggle(); }); }); </script> </head> <body> <div id="wrapper"> <div id="header"> <h1 class="main_logo"> <a href="#"> <img src="common/img/header_logo_sm.jpg" alt="lauren barge photography" /> </a> </h1> </div> <div id="content"> <h2>welcome.</h2> <div id="home_grid"> <a href="#" class="home_tile_link"> <div class="home_tile" id="home_tile_1"> <div class="home_tile_overlay"> </div> <div class="home_tile_text" id="tile_text_1">tile number 1</div> <img src="common/img/home_tiles/1.jpg" alt="" class="home_tile_img"> </div> </a> <a href="#" class="home_tile_link"> <div class="home_tile" id="home_tile_2"> <div class="home_tile_overlay"> </div> <div class="home_tile_text" id="tile_text_2">tile number 2</div> <img src="common/img/home_tiles/1.jpg" alt="" class="home_tile_img"> </div> </a> <a href="#" class="home_tile_link"> <div class="home_tile" id="home_tile_3"> <div class="home_tile_overlay"> </div> <div class="home_tile_text" id="tile_text_3">tile number 3</div> <img src="common/img/home_tiles/1.jpg" alt="" class="home_tile_img"> </div> </a> <a href="#" class="home_tile_link"> <div class="home_tile" id="home_tile_4"> <div class="home_tile_overlay"> </div> <div class="home_tile_text" id="tile_text_4">tile number 4</div> <img src="common/img/home_tiles/1.jpg" alt="" class="home_tile_img"> </div> </a> <a href="#" class="home_tile_link"> <div class="home_tile" id="home_tile_5"> <div class="home_tile_overlay"> </div> <div class="home_tile_text" id="tile_text_5">tile number 5</div> <img src="common/img/home_tiles/1.jpg" alt="" class="home_tile_img"> </div> </a> <a href="#" class="home_tile_link"> <div class="home_tile" id="home_tile_6"> <div class="home_tile_overlay"> </div> <div class="home_tile_text" id="tile_text_6">tile number 6</div> <img src="common/img/home_tiles/1.jpg" alt="" class="home_tile_img"> </div> </a> <a href="#" class="home_tile_link"> <div class="home_tile" id="home_tile_7"> <div class="home_tile_overlay"> </div> <div class="home_tile_text" id="tile_text_7">tile number 7</div> <img src="common/img/home_tiles/1.jpg" alt="" class="home_tile_img"> </div> </a> <a href="#" class="home_tile_link"> <div class="home_tile" id="home_tile_8"> <div class="home_tile_overlay"> </div> <div class="home_tile_text" id="tile_text_8">tile number 8</div> <img src="common/img/home_tiles/1.jpg" alt="" class="home_tile_img"> </div> </a> <div class="home_tile" id="home_tile_9"> <img src="common/img/home_tiles/1.jpg" alt="" class="home_tile_img"> </div> </div> </div> </div> </body> </html> scss
/* scss document */ * { margin: 0; padding: 0; font-family: "gill sans", "gill sans mt", "myriad pro", "dejavu sans condensed", helvetica, arial, sans-serif; } #wrapper { height: 100%; width: 900px; margin: 0 auto; } #header { padding: 10px 0; } #content { padding: 0 20px; } #home_grid { width: 570px; margin: 0 auto; .home_tile { width: 150px; height: 150px; margin-top: 10px; margin: 14px; float: left; position: relative; .home_tile_text { width: 100%; text-align: center; display: none; position: absolute; bottom: 40%; font-size: 20px; color: white; } .home_tile_overlay { width: 150px; height: 150px; position: absolute; display: none; background: rgb(250, 96, 28); /* fallback */ background: rgba(250, 96, 28, 0.5); } &:hover { .home_tile_text { display: block; } .home_tile_overlay { display: block; } } } } h1.main_logo { width: 400px; height: 69px; { border: none; } }
try this:
$(document).ready(function() { $('.home_tile_text').hide().removeclass('text').addclass('text-js'); //$('.home_tile_overlay').hide().removeclass('text').addclass('text-js'); $('.home_tile').mouseenter(function(){ $(this).find('.text-js').finish().hide().fadein(); }); $('.home_tile').mouseleave(function(){ $(this).find('.text-js').finish().show().fadeout(); }); }); this first makes sure outstanding animations finished immediately, then, perform action want. instead of leaving chance fadetoggle right thing, make sure fade in on "mouseenter" , fade out on "mouseleave"
Comments
Post a Comment