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

我决定使用waypoint插件而不是可见的插件，这是有效的：

$(".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%");

        }
    });

当每个元素不可见时，改变它的位置

2 个答案: