CODEWITHSUNDEEP
jqueryjquery-pluginssettimeout
LauraNMS
LauraNMS

Reputation: 2853

jquery visible plugin with delay

I have a bar that I want to slide in if the parent element is visible, but I want there to be a 3 second delay. This code works if I have no delay. When I put the delay in, it doesn't work. Can you use the jquery visible plugin with a delay?

html:

<div class="picture full" id="people2">
            <div class="cutline_background"></div>
            <img src="img/People/People_2.JPG" />
            <div class="text" id="people2text" >
        Sisters stand outside a family friend's house. 
        </div>
    </div>

css:

.text {
            position: absolute;
            top: 10%;
            /*left: 40px;*/
            left: -20%;
            width: 15%;
            color: #fbfffd;
            font-size: 120%;
            line-height: 2;
            z-index: 99;
        }

  .cutline_background {
    height: 100%;
    width: 20%;
    background-color: #475f69;
    opacity: .8;
    position: absolute;
    top: 0; left: -20%;
    z-index: 10;

}

jquery:

$.each($(".picture"), function(){
            if ($(this).visible(true)) {
                window.setTimeout( //also tried setTimeout, but didn't work
                  {
                    $(this).children('.cutline_background').animate({"left":"0px"},2500, function(){});
                    $(this).children('.text').animate({"left":"40px"},2500, function(){});
                  }, 3000);

            } else{
                $(this).children('.cutline_background').css("left", "-20%");    
                $(this).children('.text').css("left", "-20%");                          }
        });

Upvotes: 0

Views: 125

Answers (2)

Esaevian
Esaevian

Reputation: 1727

In addition to setTimeout, you can use the $.delay() function in jQuery.

Which may be something like this:

$this.children('.cutline_background').delay(1000).animate({"left":"0px"}, 2500, function(){})

This will wait 1 second (1000 ms) before animating in .cutline_background

Upvotes: 1

Brian
Brian

Reputation: 1164

From what I am seeing you need to do two things.

Use a proper closure

setTimeout(function()
{
}, 3000);

Get a reference to pass to your closure. This is because your scope changes when calling the closure(you lose what "this" you are dealing with)

var $this = $(this);
setTimeout(function()
{
    $this.children('.cutline_background').animate({"left":"0px"},2500, function(){});
}, 3000);

Upvotes: 1

Related Questions