图像之间的淡入淡出作为语义中的背景图像-UI

Crossfading between images as background-image in Semantic-UI

我想要的是在两个图像之间交叉淡入淡出(在 jsfiddle 中为了简化示例我使用了颜色)。图片必须是 div.

的背景

正如您在 fiddle 中看到的那样,行为很奇怪 - 毕竟 div 回到了它之前的 css 属性。

我使用语义-ui.

http://jsfiddle.net/ksf0jdmy/

jQuery代码:

$('#button').click(function () { $('#maindiv').transition('fade').css('background-color','red').transition('fade'); });

fade()函数似乎更像是一个问题。在第一次调用 fade().

之后,它似乎没有保留对 #maindiv 元素所做的任何更改

您可以使用 CSS 转换来完成您想做的事情(请注意浏览器对 CSS 转换的支持。如果您需要更多浏览器支持,jQuery animate() 可能对你更有用)。

Fiddle: http://jsfiddle.net/7vm6rhs3/