如何让 z-index 与 jQuery 插件 Cycle 配合良好

发布于 2024-09-03 05:02:51 字数 847 浏览 15 评论 0原文

请注意，当它循环图库时，下一张图像位于最后一张图像的下方，而不是下一张图像始终覆盖上一张图像的其他图像？嗯，至少在 Firefox 3.6.3 中是这样。

我正在使用 jQuery 循环开发自定义动画，也有同样的问题。当它循环时，下一个图像会在下面而不是在上面。

这是我传递给cycle()的配置对象。

{
  fx: 'custom',
  timeout: 5000,
  easing: 'easeInOutQuad',
  pause: 1,
  cssFirst: {
       zIndex: 0
  },
  cssBefore: {
       display: 'block',
       top: -500,
       opacity: 1,
       zIndex: 1
  },
  animIn: {
       top: 0,    
       opacity: 1
  },
  animOut: {
       opacity: .2    
  },
  cssAfter: {
       display: 'none',
       opacity: .2,
       zIndex: 0
  },
  delay: -1000

}

基本上，动画与 cover 效果相同，只是上一张图像会随着下一张图像落在顶部而逐渐消失。

有没有办法在循环覆盖上一张幻灯片时获取下一张幻灯片？

谢谢

原文

Take a look at the bottom right example on the jQuery Cycle Advanced Demos page.

Notice how when it loops the gallery, the next image goes beneath the last, as opposed to others where the next image always covers the previous one? Well, at least in Firefox 3.6.3.

I'm developing a custom animation with jQuery cycle that has the same problem. When it loops, the next image goes under instead of over.

This is my config object I pass to cycle().

{
  fx: 'custom',
  timeout: 5000,
  easing: 'easeInOutQuad',
  pause: 1,
  cssFirst: {
       zIndex: 0
  },
  cssBefore: {
       display: 'block',
       top: -500,
       opacity: 1,
       zIndex: 1
  },
  animIn: {
       top: 0,    
       opacity: 1
  },
  animOut: {
       opacity: .2    
  },
  cssAfter: {
       display: 'none',
       opacity: .2,
       zIndex: 0
  },
  delay: -1000

}

Basically the animation is the same as the cover fx, except the previous image should fade away as the next one comes down on top.

Is there any way to get the next slide when it loops to cover the previous one?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寂寞清仓 2024-09-10 05:02:51

我采用了一种 hacky 方法，但它有效......

$headerImage.find('#gallery ul').cycle({
            fx: 'custom',
            timeout: 5000,
            easing: 'easeInOutQuad',
            pause: 1,
            cssFirst: {
                 zIndex: 1
            },
            cssBefore: {
                 display: 'block',
                 top: -400,
                 left: 0,
                 opacity: 1,
                 zIndex: 1
            },
            animIn: {
                 top: 0,    
                 opacity: 1
            },
            animOut: {
                 opacity: .2    
            },
            cssAfter: {
                 display: 'none',
                 opacity: .2,
                 zIndex: 0
            },
            delay: -1000,
            after: function(current, next) {

             // Had problems when it was looping that the new one wasn't covering the previous one. This hack fixes that.
         if (next == $headerImage.find('li:last')[0]) {
             $headerImage.find('li:last').css({ zIndex: -100 });
         };


            }

        });

I went with a hacky approach, but it works...

$headerImage.find('#gallery ul').cycle({
            fx: 'custom',
            timeout: 5000,
            easing: 'easeInOutQuad',
            pause: 1,
            cssFirst: {
                 zIndex: 1
            },
            cssBefore: {
                 display: 'block',
                 top: -400,
                 left: 0,
                 opacity: 1,
                 zIndex: 1
            },
            animIn: {
                 top: 0,    
                 opacity: 1
            },
            animOut: {
                 opacity: .2    
            },
            cssAfter: {
                 display: 'none',
                 opacity: .2,
                 zIndex: 0
            },
            delay: -1000,
            after: function(current, next) {

             // Had problems when it was looping that the new one wasn't covering the previous one. This hack fixes that.
         if (next == $headerImage.find('li:last')[0]) {
             $headerImage.find('li:last').css({ zIndex: -100 });
         };


            }

        });

回复收藏 0 原文

~没有更多了~