问题标签 [cross-fade]

我已经按照http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/的说明构建了我的自动幻灯片

js看起来像这样：

这适用于内容区域，只有一个元素可以淡入/淡出，例如：

但我想在我的页面上放另一个幻灯片，在结构化元素之间切换。

你可以在这里看到它：http: //jsfiddle.net/ehLdW/4/

---编辑---我玩了一下以解决脚本中的错误...我将脚本更改为以相反的顺序工作

问题还是一样 - 没有交叉淡入淡出效果，但只有一个淡入淡出动画。有趣的是，原始版本只显示了新元素的淡入淡出过渡，相反，相反的顺序版本只显示了当前元素的淡出过渡。

所以它总是显示元素的效果，索引越高我不知道如何解决这个问题......

我在使用按钮在 2 张图像之间交叉淡入淡出时遇到问题。该按钮未实现，但问题是我什至无法加载图像视图。Eclipse 不会在 java 代码中给出错误，但是当我尝试运行应用程序时，它会崩溃。我在下面包含了 MainActivity.java、LogCat 和 XML 文件。

我的xml：

日志猫：

我在使用 android 交叉淡入淡出视图时遇到了一些问题。我正在尝试在两张图片之间来回淡入淡出。我可以加载图像，但是一旦我按下淡入淡出按钮，应用程序就会崩溃。我尝试遵循 android 网站上的代码并进行修改以满足我的需要。我不太确定我是否正确设置了 XML 文件来执行多个视图。我已经尝试过 FrameLayout 内部的 ImageViews 并且也没有 FrameLayout。不知道如何正确设置它。谢谢你的时间。我在下面包含了 java、xml 和 logcat：

MainActivity.java

XML

日志猫

Android 中关于淡入淡出的问题有很多，但都包括动画。我的问题是关于使用 ViewPager 的 OnPageChangeListener 进行淡入淡出。

我有一个 ViewPager 可以有无限数量的视图，但实际上使用大约 6 或 7 个视图。那里没有太多事情发生。

ViewPager 中的每个视图都有一个背景位图，它应该固定并与下一个（或上一个）视图的背景交叉淡入淡出，而不是与视图的其余部分一起滚动。

为了实现这一点，我将背景解耦并添加到 ArrayList 并稍后将它们分配给 ImageViews。但是由于我不想冒险让我的 Activity 最终得到许多 ImageViews，所以我想到了以下结构：

然后将 aOnPageChangeListener分配给 ViewPager 以将背景分配给 ImageView。

如果我只想交换背景，这很好用。当用户滑动 ViewPager 时，我希望背景相互淡入淡出。我已经为向前滚动工作了淡入淡出，但我不明白为什么向后滚动的淡入淡出并没有给出好的结果。在向后滚动期间，中间背景应该淡入底部背景。

恐怕我错过了什么。我从不更改底部背景的 alpha，但日志结果始终显示与getAlpha()中间背景完全相同的值。

等等！还有一件事我真的无法弄清楚如何解决。虽然向前滚动淡入淡出工作。背景中有超短的闪烁。我认为这是因为我设置onPageSelected方法的方式而发生的。

还有另一种方法可以创建/修复此行为吗？

有谁知道如何转换这个 jQuery 效果，而不是固定大小的图像，我需要以百分比设置大小（宽度：100%；高度：自动），以便它们能够响应。有任何想法吗？

这就是我到目前为止得到的：fiddle。我有一个背景，当我将鼠标悬停在一个按钮上时，我想将其更改为不同的图像（并且会有几个按钮，几个图像）。

HTML：

CSS：

我快到了！只需一个按钮即可完美运行。没有那么多，有两个。我无法解决的主要问题是让背景图像相互褪色，而不是“无”然后又回来。也不确定当我添加另一个链接时发生了什么。

这些家伙完全按照我的意愿做了，但我没有勇气弄清楚他们是如何做到的。

我正在寻找一种智能解决方案来创建具有 3 个交叉淡入淡出图像的幻灯片。

活动图像应该是

1. 在三秒内淡入 80% 的不透明度
2. 停留 1 秒
3. 在 3 秒内淡出至 0% 不透明度

所有图像都应该执行相同的操作，但时间偏移 2 秒。结果应该同时显示所有 3 张图像。

这是我的起始小提琴

--

这是最终代码 - http://jsfiddle.net/guest271314/9c32wkuk/14/ - 按预期工作。
感谢您的想法guest271314！

我已经研究了几个小时，但我无法使用我的编码。

这是我到目前为止所拥有的：http: //brynntweeddale.com/

我希望能够将 ABOUT 制作成一个链接并单击它以用文本替换图像，最好是图像淡出和文本淡入。

我希望能够对每个链接执行此操作。我一直在网站上看到这个，但我就是想不通！我对这一切也很陌生。

提前致谢。

我找不到具体的解决方案，所以我希望有人可以帮助我。

我有 3 张图像，我想在鼠标悬停或悬停在那里时将它们从第一张图像交叉淡入淡出到第二张和第三张，然后在鼠标移出时向后循环。

鼠标悬停 | 原图 > 图 2 > 图 3 | 停止

鼠标移出 | 图片 3 > 图片 2 > 原始图片 | 停止

我想最好使用 JQuery，但欢迎任何解决方案。

http://css3.bradshawenterprises.com/cfimg/

这里的Demo 1对两张图片效果都不错，但是因为图片有透明区域所以互相重叠，但是图片之间的淡入淡出效果很完美。

更新

我认为我已经使用 CSS 完成了它，基于该站点的 Demo 1，我这样做了

这对我的目的来说似乎工作得很好，它会淡出第一张图像，只留下第二张图像，然后淡入第三张图像。然后在鼠标移出时反向执行相同操作。但我想知道这是否是最好的方法？或者它是否会有兼容性问题？任何帮助是极大的赞赏。

我是一名新手 HTML 开发人员，虽然我根本没有学过 Javascript，但我想将它包含在我的第一个更大的网页中。
我的布局看起来像这样，顶部有标题、菜单和图像。

图像会根据所选的菜单项而变化。
我想做的是让图像在彼此之间平滑淡入淡出，但我在互联网上找到的指南仅描述了堆叠在一起以创建画廊的图像。

如何将每个图像指定为 HTML 页面？它是否有效，或者我是否必须彻底更改我的网页以仅更改内容而不加载单独的 HTML？