使用 JQuery 进行图像交换之间的定时转换

Timed transition between image swaps with JQuery?

本文关键字：之间 定时 转换 交换 图像 JQuery 使用      更新时间：2023-09-26

我有这个代码：

$('.pic_windows img').mouseenter(function () {
    $(this).effect('shake', {
        times : 4,
        distance : 5
    }, 15).attr('src', $(this).attr('src').replace(/.jpg/, '-1.jpg'))
});
$('.pic_windows img').mouseleave(function () {
    $(this).attr('src', $(this).attr('src').replace(/-1.jpg/, '.jpg'))
});

我使用 JQuery 的 .attr 交换图像，但我希望交换发生在大约 1 秒的过程中。 我已经用谷歌搜索了一下，并得到了所有这些复杂的"带有JQuery回退的CSS3转换"教程。 有没有办法"动画".attr 更改？

我想我应该做一个淡出，而另一个淡入，但我不知道怎么写，因为我几乎是一个完整的 JQuery 新手。 在几页的过程中，我有许多这样的过渡要做。 如果我只需要为一个实例编写这个，那将是一件紧要的事情。

更新 在鼠标输入时，图像会摇晃，然后在此摇晃期间，应该从一张图片淡入其交换的图片。 在鼠标离开时，图像应该淡出回原始图片。 不幸的是，我还发现摇晃效果在IE，所有版本以及图像交换上都中断了（它根本没有看到图像2）

不可以，不能对属性更改进行动画处理。您可以做的是克隆元素，更改属性并在它们之间转换。

var target = $(this).fadeOut();
var src = target.attr('src').replace(/-1.jpg/, '.jpg');
var copy = target.clone()
    .attr('src', src)
    .hide()
    .insertAfter(target)
    .fadeIn();

编辑：感谢您澄清您的意图，我建议不要使用"src"，这基本上需要构建一个小的有状态插件。相反，请在此处坚持所需的效果，在悬停时显示图像。js小提琴

.HTML

<div class="shaker">
    <img src="http://lorempixel.com/output/nature-q-c-360-240-3.jpg" />
    <img class="hover" src="http://lorempixel.com/output/technics-q-c-360-240-9.jpg" />
</div>​

.CSS

.shaker {
    position: relative;
}
.shaker img {
    position: absolute;
}
.hover {
    display: none;
}

.JS

$('.shaker').hover(function () {
    $(this).effect('shake', {
        times: 4,
        distance: 5
    }, 15);
    $(this).find('.hover').fadeIn();
}, function () {
    $(this).find('.hover').stop().fadeOut();
});​

http://jsfiddle.net/eHQ3t/13/

相关文章：