www.webdeveloper.com
Results 1 to 2 of 2

Thread: How to 'setTimeout' function to javascript

  1. #1
    Join Date
    Feb 2012
    Posts
    2

    How to 'setTimeout' function to javascript

    Hello,
    I would be very grateful for some help on adding 'setTimeout' function to javascript below. Need to create a delay (say 500 milliseconds) on images appearing when you mouseover the list of names. I have no .js knowledge.

    This is the javascript as is:
    Code:
    <script type="text/javascript">
    $(document).ready(function() {
    
    $(".infoPanel li a img").hide();
    
    $(".infoPanel li a").eq(0).addClass("current");
    $("a.current").next().show();
    $(".infoPanel li a.current img").show();
    
    $(".infoLink").mouseover(function() {
       if (this.className.indexOf("current") == -1) {
           $("a.current").next().hide();
           $(".infoPanel li a.current img").hide();
           $("a.current").removeClass("current");
           $(this).addClass("current");
           $("a.current").next().show();
           $(".infoPanel li a.current img").show();
       }
    });
    
    
    });
    </script>
    and this is the bit if html it effects:
    Code:
    <ul class="infoPanel">
    	<li><a class="infoLink" href="#url"><span>Paula Rego</span></a>
    		<div class="img"><img src="assets/projects/P_Rego.jpg" alt="" />
    		 <div class="text"><p>Publisher: Marlborough Gallery<br />
           <a href=" http://www.marlboroughgallery.com/galleries/graphics/artists/paula-rego/graphics" title="www.marlboroughgallery.com" target="_blank" rel="external">www.marlboroughgallery.com</a></p>
    		</div></div>
    	</li>
    </ul>
    Any help will be very much appreciated..

  2. #2
    Join Date
    Jun 2010
    Posts
    64
    Well the code is a bit of a mess 2bh but something along these lines will probably work:
    Code:
    $(".infoLink").mouseover(function() {
       window.setTimeout(
          function() {
             if (this.className.indexOf("current") == -1) {
                 $("a.current").next().hide();
                 $(".infoPanel li a.current img").hide();
                 $("a.current").removeClass("current");
                 $(this).addClass("current");
                 $("a.current").next().show();
                 $(".infoPanel li a.current img").show();
             }
        },
        500
    });
    (Not tested!)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles