0

私はこのコードを持っています:

$('.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 初心者であるため、その書き方がわかりません。いくつかのページにわたって、これらのトランジションを数多く行う必要があります。たった 1 つのインスタンスのためにこれを書く必要があるとしたら、それは簡単なことです。

更新 マウス入力時に画像が揺れ、この揺れの間に 1 つの画像からスワップされた画像にフェードするはずです。マウスを離すと、画像は元の画像にフェードバックするはずです。残念ながら、IE、すべてのバージョン、および画像スワップでシェイク効果が壊れていることもわかりました (画像 2 はまったく表示されません)。

4

1 に答える 1

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/

于 2012-05-29T03:21:56.163 に答える