Question

如果父元素可见，我有一个我想要插入的栏，但我想要有3秒的延迟。如果我没有延迟，此代码有效。当我把延迟放进去时，它不起作用。你可以延迟使用jquery可见插件吗？

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%");                          }
        });

Answer 1

从我所看到的你需要做两件事。

使用合适的封闭

setTimeout(function()
{
}, 3000);

获取传递到关闭的引用。这是因为在调用闭包时你的范围会改变（你失去了你正在处理的“这个”）

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

Answer 2

除了setTimeout之外，您还可以在jQuery中使用$.delay()函数。

可能是这样的：

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

在.cutline_background

中制作动画之前，这将等待1秒（1000毫秒）

jquery可见插件有延迟

2 个答案: