当每个元素不可见时，更改其位置

Question

我正在使用 $.each 来查找我网页上的每个“屏幕”。我希望在每个屏幕变得可见时发生一些事情，然后当元素不再可见时该动作自行反转。这是最后一部分不起作用。

我正在使用 jquery 可见插件。

jquery:

$( window ).scroll(function() { //check for visibles    
$.each($(".picture"), function(){
                var $this = $(this);
                if ($(this).visible(true)) {

                    setTimeout(function()
                    {
                        $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

问题在于延迟显示使元素的隐藏变得混乱。例如，滚动到元素，设置显示超时，然后滚动离开此元素，应用隐藏，然后启动显示动画。

我建议保持对象的状态（例如，使用data-state）并在显示和隐藏之前检查它以处理所有这些情况。

如何做到这一点的例子在updated fiddle。

我没有解决的唯一小问题是当您滚动离开元素并在超时期间滚动回它时重置超时。

完整代码：

var isHidden = 0;
var isAnimated = 1;
var isShown = 2;
var shouldBeHidden = 3;

$(document).ready(function()
{
    $(".picture").data('state', isHidden);

    $(window).scroll(function()
    {
        $(".picture").each(function()
        {
            var $this = $(this);
            var thisIsVisible = $this.visible(true);
            var thisState = $this.data('state');
            if (thisIsVisible && thisState == isHidden)
            {
                $this.data('state', isAnimated);            
                setTimeout
                (
                    function()
                    {
                        showElement($this);
                    },
                    3000
                );
            }
            else if (thisIsVisible && thisState == shouldBeHidden)
            {
                $this.data('state', isAnimated); 
            }
            else if (!thisIsVisible && thisState == isShown)
            {
                hideElement($this);
            }
            else if (!thisIsVisible && thisState == isAnimated)
            {
                $this.data('state', shouldBeHidden); 
            }
        }); 
    });
});

function showElement($this)
{
    if ($this.data('state') == shouldBeHidden)
    {
        $this.data('state', isHidden);
        return;
    }
    $this.children('.cutline_background').animate
    (
        {
            "left": "0px"
        },
        2500
    );
    $this.children('.text').animate
    (
        {
            "left": "40px"
        },
        2500,
        function()
        {
            if ($this.data('state') == shouldBeHidden)
            {
                hideElement($this);
            }
            else
            {
                $this.data('state', isShown);
            }
        }
    );
}

function hideElement($this)
{
    $this.children('.cutline_background').css("left", "-20%");  
    $this.children('.text').css("left", "-20%");
    $this.data('state', isHidden);
}

Answer 2

我决定使用航点插件而不是可见插件，这是可行的：

$(".picture").waypoint(function(direction){
        var $this = $(this);
        if (direction === "down") {
            setTimeout(function()
                {
                    $this.children('.cutline_background').animate({"left":"0px"},2500, function(){});
                    $this.children('.text').animate({"left":"40px"},2500, function(){});
                }, 3000);

        }
        if (direction === "up") { 
            $this.children('.cutline_background').css("left", "-20%");  
            $this.children('.text').css("left", "-20%");

        }
    });