0

ここに私の問題へのjsfiddleリンクhttp://jsfiddle.net/XnnvD/35/ (完全に機能していません)

問題が何であるかを説明してみます.jQueryに3セットのアニメーションがあります

1- 以下のように、一定の TimePeriod の後に画像が跳ね返ったりフェードアウトしたりします。

$('#homePageImage').animate(
                    { top: '50px' },
                    { queue: false, duration: 1000, easing: 'easeOutBounce' });
$('#homePageImage').delay(3000).effect('drop', { direction: "right" });

.fadeIn()2-以下のようにランダムに画像のセット:

randNumArray = shuffle(randNumArray);
for (var i = 0; i < 9; i++)
{ $('#fs' + randNumArray[i]).delay(j += 200).fadeIn(j); }

3- これらの画像にカーソルを合わせると、以下のように拡大されます。

$(function () {
            $("ul.thumb li").hover(function () {
                $(this).css({ 'z-index': '10' });
                $(this).find('img').addClass("hover").stop().animate({
                    marginTop: '-110px',
                    marginLeft: '-110px',
                    top: '50%',
                    left: '50%',
                    width: '174px',
                    height: '174px',
                    padding: '20px'
                }, 500);

            }, function () {
                $(this).css({ 'z-index': '0' });
                $(this).find('img').removeClass("hover").stop().animate({
                    marginTop: '0',
                    marginLeft: '0',
                    top: '0',
                    left: '0',
                    width: '100px',
                    height: '100px',
                    padding: '5px'
                }, 500);
            });
        });

問題: アニメーションの最初のセットが完了する前にユーザーがカーソルを合わせると、画像が完全に表示されず.fadeIn()、部分的に表示される/表示されない

私が望むこと: アニメーションの 1 番目と 2 番目のセットが完了するまで、3 番目のセット (ホバリングして拡大) を非アクティブのままにしたいのですが、どうすればよいですか?

ありがとう

4

3 に答える 3

0

2 番目のアニメーションの背面でホバー関数をコールバック関数として呼び出してみてください。基本的には：

$("#homePageImage").fadeIn("slow", function() {

// enable hover function

});
于 2011-05-16T20:47:11.240 に答える
0

コールバックを使用したいだけではありませんか:

$('image').fadeIn('fast', function() {
  $('image').hover(function() {do stuff...});
});
于 2011-05-16T20:50:38.060 に答える
0

Hover 関数を次のように SetTimeOut 関数に入れます

setTimeout((function () {
            $("ul.thumb li").hover(function () {
                $(this).css({ 'z-index': '10' });
                $(this).find('img').addClass("hover").stop().animate({
                    marginTop: '-110px',
                    marginLeft: '-110px',
                    top: '50%',
                    left: '50%',
                    width: '174px',
                    height: '174px',
                    padding: '20px'
                }, 500);

            }, function () {
                $(this).css({ 'z-index': '0' });
                $(this).find('img').removeClass("hover").stop().animate({
                    marginTop: '0',
                    marginLeft: '0',
                    top: '0',
                    left: '0',
                    width: '100px',
                    height: '100px',
                    padding: '5px'
                }, 500);
            });
        }), *Put time in miliseconds*);

したがって、これにより、指定された期間までホバーが発生しないことが保証されます!

于 2011-05-16T21:29:01.977 に答える