图像交换与JQuery之间的时间转换？

Question

我有这样的代码：

$('.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秒的时间内进行交换。我在googled上搜索了这些内容，并获得了所有这些复杂的"CSS3转换与JQuery回退“教程。有什么方法可以“动画”一个.attr的变化吗？

我认为我应该做一个fadeOut，而另一个fadeIn，但我不知道如何写它，因为我几乎是一个完整的JQuery新手。在几页的过程中，我有许多这些转换要做。如果我只需要为一个例子写这个，那就太容易了。

更新鼠标上的，图像抖动，然后在此抖动期间，从一张图片淡出到它交换的图片。在鼠标保存时，图像应该消失回原来的图片。不幸的是，我还发现在IE、所有版本以及图像交换(它根本没有看到图像2)上出现了抖动效应。

Answer 1

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

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'，这基本上需要构建一个小的有状态插件。相反，坚持想要的效果在这里，揭示一个图像在悬停。jsFiddle

<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/