jquery - 让2张图片动起来，类似 "marquee"风格

Question

我正在尝试找出一个 CSS 或 jQuery 样式代码，其功能类似于 <marquee> HTML 元素。本质上，我试图在一张图片上获取 2 张图片，上下滑动大约。 10-15 像素，缓慢。单击其中一张时，它将停止另一张图片，使屏幕变暗，并且会弹出一个额外的弹出窗口，其中包含所点击图片的“简介”。

我已经设法让 jQuery/CSS 使屏幕变暗，并弹出窗口(我想我可能使这种方式比预期的更复杂)，但我想使用 HTML marquee非常过时。我已经查看了所有内容，但在查找满足我要求的代码时遇到了问题。不涉及按键点击或鼠标悬停。 (我不确定如何使用 .animate 并使其自动运行。仍在学习 jQuery。

我知道.animate(on.click) [语法错误，我知道] 但我不确定如何 .animate只是时期的作品。我的意思是 z.animate(function(){z 等可能会工作 - 但当我的图片被点击时它会停止吗？

Answer 1

查看 Using CSS transitions和 CSS animations在 MDN 上。

CSS 转换决定了动画的行为，animation 可以让它无限期地持续，直到它被点击。由于它可以分配给一个 CSS 类，这应该允许它像你想要的那样切换，所以要让它停止，只需从图像中删除它定义的 CSS 类。