как сделать анимацию неактивной на некоторое время в JQuery - PullRequest
Новая
       24

как сделать анимацию неактивной на некоторое время в JQuery

0 голосов
/ 17 мая 2011

здесь ссылка jsfiddle на мою проблему http://jsfiddle.net/XnnvD/35/ (не совсем работает)

Я попытаюсь объяснить, в чем проблема, у меня есть 3 набора анимации в jQuery

1 - изображение отскакивает и исчезает после некоторого периода времени, как показано ниже: 

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

2 - набор изображений .fadeIn() случайным образом, как показано ниже: 

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);
            });
        });

Проблема: Если пользователь наводит указатель мыши до завершения 1-го набора анимации, изображения не .fadeIn() полностью и, следовательно, частично / не видны

Что я хочу: Я хочу, чтобы 3-й набор (зависание для увеличения) оставался неактивным до завершения 1-го и 2-го набора анимаций. Как я могу это сделать?

Спасибо

Ответы [ 3 ]

0 голосов
/ 17 мая 2011

Разве вы не хотите использовать обратный вызов: 

$('image').fadeIn('fast', function() {
  $('image').hover(function() {do stuff...});
});
0 голосов
/ 17 мая 2011

Поместите вашу функцию наведения в функцию 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*);

Так что это гарантирует, что зависание не произойдет до указанного периода времени!

0 голосов
/ 17 мая 2011

Не могли бы вы попробовать вызвать функцию наведения в качестве функции обратного вызова на обратной стороне второй анимации.В основных терминах: 

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

// enable hover function

});
...