Nick Brunt Posted January 17, 2011 Share Posted January 17, 2011 Hiya, I'm attempting to make an image link flicker when you hover over it and I've run into some problems. This is the relevant part of my code: <script type="text/javascript"> $(init); function init() { $(".main-link").hover(function() { $(this).hide(); $(this).delay(1000); $(this).show(); }); } </script> </head> <body> <div class="home-centre"> <div class="home-middle"> <a href="#" class="main-link" id="link-tees"></a> <a href="#" class="main-link" id="link-hoodies"></a> <a href="#" class="main-link" id="link-novelty"></a> <a href="#" class="main-link" id="link-custom"></a> <a href="#" class="main-link" id="link-contact"></a> My problem is that the delay isn't working. I've tried $(this).hide().delay(1000).show(); and that doesn't work either. I'm sure it's something simple but I can't get my head around it. Link to comment Share on other sites More sharing options...
0 +Dick Montage Subscriber² Posted January 17, 2011 Subscriber² Share Posted January 17, 2011 Put your delay and show as callbacks Link to comment Share on other sites More sharing options...
0 Nick Brunt Posted January 17, 2011 Author Share Posted January 17, 2011 Put your delay and show as callbacks I tried this and it didn't work: <script type="text/javascript"> $(init); function init() { $(".main-link").hover(function() { $(this).hide(1, function() { $(this).delay(1000, function() { $(this).show(); }); }); }); } </script> Link to comment Share on other sites More sharing options...
0 Nick Brunt Posted January 17, 2011 Author Share Posted January 17, 2011 Ok it's actually an official bug: http://bugs.jquery.com/ticket/7721; $(this).hide().delay(50).show(); will not work, whereas $(this).hide(0).delay(50).show(0); will work. Link to comment Share on other sites More sharing options...
0 sweetsam Posted January 17, 2011 Share Posted January 17, 2011 Try this... If you want to flicker a link then your selector would be the immediate parent. $(function(){ var loc = { int: '' }; $('.selector').mouseover( function(){ var $obj = $(this).children(); var shfn = function(){ $obj.fadeIn(20); } var hdfn = function(){ $obj.fadeOut(20, shfn); } loc.int = setInterval(hdfn, 40); }).mouseout( function(){ clearInterval(loc.int); $(this).children().stop(true, true).removeAttr('style').show(); } ); }); Link to comment Share on other sites More sharing options...
0 Nick Brunt Posted January 17, 2011 Author Share Posted January 17, 2011 Try this... If you want to flicker a link then your selector would be the immediate parent. No, the image was actually a background-image of the anchor tag. It's all sorted now anyway, but thanks for your reply. Link to comment Share on other sites More sharing options...
Question
Nick Brunt
Hiya,
I'm attempting to make an image link flicker when you hover over it and I've run into some problems.
This is the relevant part of my code:
<script type="text/javascript"> $(init); function init() { $(".main-link").hover(function() { $(this).hide(); $(this).delay(1000); $(this).show(); }); } </script> </head> <body> <div class="home-centre"> <div class="home-middle"> <a href="#" class="main-link" id="link-tees"></a> <a href="#" class="main-link" id="link-hoodies"></a> <a href="#" class="main-link" id="link-novelty"></a> <a href="#" class="main-link" id="link-custom"></a> <a href="#" class="main-link" id="link-contact"></a>My problem is that the delay isn't working. I've tried
and that doesn't work either.
I'm sure it's something simple but I can't get my head around it.
Link to comment
Share on other sites
5 answers to this question
Recommended Posts