как остановить быстрые события зависания в JQuery

Question

как остановить быстрые события зависания в JQuery

0

Я хочу добавить кнопки в свою карусель, которые появляются, когда пользователь зависает над карусели и скрывает их, когда они покидают этот элемент.

Я сделал это, но когда я быстро вхожу и оставляю зависающий элемент, анимация (непрозрачность 0-1) повторяется, как только я остановлюсь.

Вот скрипка, чтобы продемонстрировать. Вам нужно быстро войти и оставить окно результатов, чтобы увидеть, что я имею в виду (черные черновые вещи представляют собой представление моих кнопок)

http://jsfiddle.net/BrshS/

transitions the opacity on hover, but repeats it a lot when hovered many times

кто-нибудь знает, как я могу остановить это? высоко оценили, были у него часами (т.е. почти весь день:/)

a7omiton 23 окт. 2013, в 00:14

Источник

0

stackoverflow.com/questions/12727561/…, кажется, ответил на него. почему мне нужно добавить 100 к animate () в качестве второго параметра?
a7omiton 22 окт. 2013, в 21:58
0

Вам не нужно , но это время в миллисекундах для завершения анимации. По умолчанию это 300 миллисекунд.
ahren 22 окт. 2013, в 21:59
0

@ a7omiton, который не останавливает это, просто делает это менее очевидным. если вы наведите курсор мыши 10 раз за 100 мсек, потребуется 1 секунда для того, чтобы он исчез и исчез.
Kevin B 22 окт. 2013, в 22:05
0

@KevinB да, Арен показал мне эту ошибку, теперь я понимаю. спасибо за разъяснение, я иду с альтернативой css3 слава Богу
a7omiton 22 окт. 2013, в 22:10

Показать ещё 2 комментария

Теги:

jquery

jquery-hover

3 ответа

1

Вы можете просто использовать .fadeTo() вместо метода анимации, а также .stop() чтобы прервать текущую анимацию.

  var $buttons = $('#next, #prev').hide();

  $('.image_carousel').hover(function() {
    $buttons.stop().fadeTo(300,1);
  },
  function(){
    $buttons.stop().fadeTo(300,0);
  });

Демо: http://jsfiddle.net/BrshS/2/

ahren 22 окт. 2013, в 19:42

0

этот метод фактически останавливает анимацию, что я и хотел сделать изначально, большое спасибо, не могу поверить, что я упустил stop (): P
a7omiton 22 окт. 2013, в 22:04

0

вы можете "остановить" его методом stop,

x.stop(true,true).animate(

http://jsfiddle.net/Tentonaxe/BrshS/4/

или даже метод finish.

x.finish().animate(

http://jsfiddle.net/Tentonaxe/BrshS/5/

Kevin B 22 окт. 2013, в 20:03

Ещё вопросы

stackoverflow.com/questions/12727561/…, кажется, ответил на него. почему мне нужно добавить 100 к animate () в качестве второго параметра?
Вам не нужно , но это время в миллисекундах для завершения анимации. По умолчанию это 300 миллисекунд.
@ a7omiton, который не останавливает это, просто делает это менее очевидным. если вы наведите курсор мыши 10 раз за 100 мсек, потребуется 1 секунда для того, чтобы он исчез и исчез.
@KevinB да, Арен показал мне эту ошибку, теперь я понимаю. спасибо за разъяснение, я иду с альтернативой css3 слава Богу
этот метод фактически останавливает анимацию, что я и хотел сделать изначально, большое спасибо, не могу поверить, что я упустил stop (): P

nietonfir · Accepted Answer · 2013-10-22T19-14-00.000Z

Обновлен ваш пример, чтобы использовать анимацию CSS3 как способ продвижения в настоящее время. Нет необходимости в javascript, улучшать производительность и грациозную деградацию бесплатно!

.next,
.prev {
    opacity: 0;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.image_carousel:hover .next,
.image_carousel:hover .prev {
    opacity: 1;
}

О боже, я сначала хотел сделать это в css, но никогда не задумывался о непрозрачности в css, был настолько разочарован jquery. благодарю вас!!