SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery with Settimeout then hide span

    I'm wanting to display a span, which works:
    $(this).siblings("span").css('display','inline');

    Then I want to hide it 5 seconds later (following is the next line of code after the above):
    setTimeout(function(){
    //alert("here");
    $(this).parent("span").css("display","none");
    },5000);

    This doesn't work - if I un-comment the alert - the alert displays.. But the "$(this).parent("span").css("diy debugging to see if the settimout worked as it should.

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this part of the same function, if so shouldn't it be:

    $(this).siblings("span").css("display","none");

  3. #3
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Untested but should work

    Code JavaScript:
    var current = $(this).siblings("span");
    $(current).show(1000).fadeTo(5000, 1).hide(1000);
    It's a little nicer than using css properties.
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  4. #4
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tom_tom_10 View Post
    Is this part of the same function, if so shouldn't it be:

    $(this).siblings("span").css("display","none");
    Correct - sorry that is what I tried, and it didn't work. It works without settimout, but not in settimeout.

    Yes, same function, next line

  5. #5
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    425
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by blain View Post
    Untested but should work

    Code JavaScript:
    var current = $(this).siblings("span");
    $(current).show(1000).fadeTo(5000, 1).hide(1000);
    It's a little nicer than using css properties.
    Thanks.
    That works, but it did a fancy fade - I just want it to disappear straight away, without closing to the side.

  6. #6
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    var current = $(this).siblings("span");
    $(current).show().fadeTo(5000, 1).hide();
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  7. #7
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does not work because the link between $(this) and the element is lost. Download firebug and firefox. Load up your page and have this line inside the timeout function.

    Code:
    console.log($(this));
    Have the console tab active and reload the page. You will see that by the time the function is activated $(this) does not contain the right element. you are better off doing it this way...

    Code:
    $span = $(this).siblings('span').css('display', 'inline');
    setTimeout(function(){
         $span.fadeout(400);
    }, 5000);


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
  •