javascript - parallax.js + js 淡入/淡出 = 第一个 <li> 之后没有欢乐

Question

我正在使用 parallax.js 为主页上的一系列元素设置动画。我搜索了允许我向元素添加简单的“ slider ”效果的代码。

一切似乎都工作正常，除了在第一个li之后，视差效果仅在水平方向上起作用。在 li #1 上，元素按预期悬停，跟随鼠标向各个方向移动。

这是 jsfiddle 的链接:http://jsfiddle.net/sdeviva/t6uwq/1/

这里是修改后的 jsfiddle 的链接:http://jsfiddle.net/sdeviva/t6uwq/5/

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

var scene = document.getElementById('scene2');
var parallax = new Parallax(scene2);


(function($) {
$.fn.ezslide = function ( options ) {
var defaults = {
        fadeIn  : 1000,
        fadeOut : 1000,
        delay   : 500
    },
    settings = $.extend( defaults, options ),
    $this = this,
    cur = 0,
    fadeIt = function( which ) {
        var li = $this.find('li');

        cur = which = (which >= li.length) ? 0 : which;

        li.fadeOut( settings.fadeOut );
        li.eq( which )
          .delay( settings.fadeOut )
          .fadeIn( settings.fadeIn, function(){
            setTimeout(function() { 
                cur++;
                fadeIt( cur ); 
            }, settings.delay);
        });

    };

fadeIt( cur );
};

$('ul.scene').ezslide({
    fadeIn  : 600,
    fadeOut : 600,
    delay   : 3000
    });
})(jQuery);

编辑:我解决了这个问题。我真的不知道我在做什么，所以可能有一种更干净的方法。但是，我意识到视差效果仅对第一个列表项应用一次。使每个项目淡入的脚本没有获得 parallax.js 脚本的好处。

SO - 我将每个淡入淡出元素放入其自己的 ul 中，并具有唯一的 id 和共享类。奇迹般的是，这确实有效。但如果有更好的方法请告诉我。

Answer 1

这是一个有趣的事情。问题在于视差代码将第一层设置为 position:relative 并将所有其他层设置为 position:absolute。这具有使父ul仅具有第一层的尺寸的效果。这通常很好，但当您显示第一个元素以外的任何元素时，第一个元素将被隐藏。这会导致 ul 的高度为 0。视差取决于场景的高度，因此没有高度就意味着没有垂直移动。

您可以通过对 ul 应用固定高度来解决该问题:

#scene{
    height: 128px;    
}

http://jsfiddle.net/t6uwq/7/

您可以在documentation on github中找到有关运动计算的更多详细信息。 .