• 0

Creating a jQuery flicker effect


Question

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

5 answers to this question

Recommended Posts

  • 0

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

  • 0

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

  • 0

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

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.