SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I create a delay on mouseover?

    Hello,
    I would be very grateful for some help. I would like to set a function to create a delay on images that appear when you mouseover the list of names on left side of my page (see link below). I have no .js knowledge.

    This is the page with the list of names on the left needing the delay effect:
    http://www.pauperspublications.com/projects2.html

    Any help is appreciated.

  2. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,508
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Welcome to the SP forums. I've moved your question to our JS forum. The possibilities of getting an answer are much higher there

  3. #3
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Grazie mille guido2004.

  4. #4
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,617
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Try the native javascript function settimeout() http://www.w3schools.com/js/js_timing.asp

    Or, since you're using jQuery, the jQuery function delay() http://api.jquery.com/delay/
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  5. #5
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help on this. Unfortunately I am a beginner with javascript code and have no idea where I should be adding this jQuery function delay. I did try. It did not work.
    I think it sais to add:
    $("div.").delay(500);
    Where do I add this? (?HERE?)
    Would you please be kind enough to tell me where in my javascript (below) I am to paste this?

    here is my javascript:
    <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.infoLink").delay(500); (?HERE?)
    $("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>
    Thank you again for your help. Really appreciate it.


Bookmarks

Posting Permissions

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