视差.js + js淡出=第一次<光<后没有乐趣

parallax.js + js fadein/out = no joy after first <li>

本文关键字：js 第一次 视差 淡出      更新时间：2023-09-26

我正在使用parallax.js在主页上制作一系列元素的动画。我搜索代码，允许我添加一个简单的"滑块"效果的元素。

一切似乎都工作正常，除了在第一个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);

EDIT:我修复了这个问题。我真的不知道我在做什么，所以可能有更干净的方法。但是，我意识到视差效果只应用于第一个列表项一次。让每个项目淡出的脚本没有得到parallax.js脚本的好处。

SO -我将每个褪色元素放入其自己的ul中，具有唯一的id和共享类。奇迹发生了，这真的有效。如果有更好的方法，请告诉我。

这是一个有趣的问题。问题是视差代码将第一层设置为position: relative，而将所有其他层设置为position: absolute。这样做的效果是使母体ul只有第一层的尺寸。这通常很好，除了当您显示除第一个元素之外的任何元素时，第一个元素将被隐藏。这导致ul的高度为0。视差取决于场景的高度，因此没有高度意味着没有垂直移动。

你可以通过给ul应用一个固定的高度来解决这个问题:

#scene{
    height: 128px;    
}
http://jsfiddle.net/t6uwq/7/

你可以在github的文档中找到更多关于运动计算的详细信息

相关文章：