Question

我正在使用parallax.js为主页上的一系列元素制作动画。我搜索了一些代码，可以让我添加一个简单的＆＃34;滑块＆＃34;对元素的影响也是如此。

除了在第一个 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中找到有关运动计算的更多详细信息。

parallax.js + js fadein / out =在第一次<li> </li>之后没有欢乐

1 个答案: