0

我有一堆图像，绝对定位在同一个地方，通过将 zIndex=-1 设置为除可见图像之外的所有图像，我一次只能看到一个图像。在页面的另一侧，我有一个所有图像名称的列表，当我将鼠标悬停在特定图像名称上时，我希望该图像通过淡入变得可见，而之前可见的图像淡出。我用这段代码做这个

$(this).hover(  //visible and hover below are variable names  
        visible.css({opacity: '0',zIndex: '-1'}); //the previous image diassapears
        hovered.css({ zIndex: '1', opacity: '1'}); //the new image fades in
    )

并通过 css 转换 opacity 属性。问题是，当我将鼠标悬停在新图像名称上时，旧图像会消失而不会淡出，而新图像会开始淡入。我想旧图像确实会淡出，但由于zIndex=-1 立即生效。我想问一下解决这个问题的最佳方法。请注意，我想在不使用 jQuery 动画的情况下执行此操作，而仅使用纯 css 动画只是为了利用 css 动画的（最低限度）更高速度。因此，一个几乎没有计算开销的解决方案（因此在这种情况下 css 动画仍然具有优势）将是可取的。

4

2 回答 2

1

您需要z-index:-1在它动画回不透明度 0 之后应用它，否则它只是在下面“弹出”而不显示不透明度变化。

您需要触发 transitionEnd 事件。请参阅这篇关于为所有浏览器规范化该事件的SO 帖子。

但是一旦你解决了这个问题，它基本上只是附加一个一次性事件，回调设置最终的 z-index - 像这样：

visible.one('transitionEnd', function(){
    visible.css('z-index', -1);
}).css( 'opacity', 0 );

您只需要使用其他 SO 帖子中的脚本来获取标准化'transitionEnd'事件。

希望这可以帮助！

于 2012-05-02T23:59:36.120 回答
0

使用animate- 它带有队列管理和回调支持“开箱即用”

http://api.jquery.com/animate/

于 2012-05-02T23:51:21.237 回答