通过CSS3、JS或jQuery来帮助实现过渡效果。

Question

我希望您可以在移动到另一张图片时更改此图片的背景图像，该图片位于我的图像文件夹中，就像这个示例一样。这是我的代码。

CSS

.image {

    position: relative;
        overflow: hidden;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
        opacity:1;
filter:alpha(opacity=100);

}
.image:hover {

        opacity:0;
filter:alpha(opacity=0);
    -moz-transform:  scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
    -webkit-transform:   scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
    transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg); transform-origin: 0% 0%
    background-color:#36F;

    }

HTML

<div id="image_holder_1" class="image_holder">
    <img id="image_1" class="image" src="images/esu.gif" />
</div>

- john

Answer 1

jQuery.cycle是你的解决方案。

<script type="text/javascript">

    $(document).ready(function() {
        $('.image_holder').cycle({
                fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        });
    });
</script>

你应该移除 "image" id，并且把图片元素放入到 "image_holder" 中，这样包含着你想要轮播（切换）的图片链接。你的 HTML 看起来会是这个样子：

<div id="image_holder_1" class="image_holder">
         <img src="images/esu.gif"/>
         <!-- Your other image source(s) goes here -->
</div>

如果您的图像转换使用css实现效果良好，请在jQuery中省略转换类型并继续使用css。以下链接是使用jQuery.cycle可能对您有用的不同转换方式。jQuery.cycle 转换方式

- user799910

Answer 2

在您的示例中，这种效果无法通过CSS实现，过渡动画无法被取消，因此CSS中的每个动画都必须完成鼠标悬停和鼠标移出事件。

- JaredMcAteer

---

代码已经修复，我所做的大部分效果都已生效，除了更改图像。那么如何通过JS / jQuery仅实现最后一个效果？ - john