JQuery и остановить () - PullRequest
1 голос
/ 29 июня 2011

Здравствуйте, я до сих пор не понимаю, как работает stop ().Это останавливает все текущие анимации на объекте, верно?Как я могу сбросить все состояние и сделать следующую анимацию?Бывает, что если у вас есть постепенное исчезновение / затухание при наведении / уменьшении мыши, если вы делаете это быстро, случается, что анимация останавливается на половине затухания, и в следующий раз объект больше не будет отображаться

        //show delete link on hover
    $('li.dir').live('mouseover mouseout', function(event) {
          if (event.type == 'mouseover') {
            $(this ).find("span.delete_file").delay(800).fadeIn('fast');
          }
           else{
            $(this).find("span.delete_file").fadeOut('fast');
          }
    });

HTML

<li class="dir" title="">
                    <span class="pin"></span>
                    <span  class="name">test</span> 
                    <span class="delete_file" title="/test"></span>
                        <ul class="sub_folder">
                        </ul>

                </li>

Как и где я должен поставить stop (), чтобы при переходе по li.dir исчезал .delete_file, но в то же время выход из мыши останавливал все!Он пытался играть с помощью stop () show () hide (), но всегда случается, что если я очень быстро перемещаю мышь вверх и вниз, анимация «fadeIN» перезапускается с последнего параметра, который может быть любым от 100% до 0%.непрозрачность (вообще не отображается)

Ответы [ 2 ]

0 голосов
/ 29 июня 2011

Эта демонстрация должна делать то, что вы хотите. Я изменил селектор, чтобы создать более традиционную комбинацию .mouseenter(), .mouseleave(). Если вам нужен delay(), его можно добавить обратно. Демо работает с и без него для меня.

.stop() имеет тенденцию вызываться перед вызовом эффекта анимации, тем самым останавливая запущенную анимацию перед запуском другой.

0 голосов
/ 29 июня 2011

Вам нужно сказать:

$(this)....stop(true, true).fadeTo(1).fadeOut("fast");

и

$(this)....stop(true, true).fadeTo(0).fadeIn("fast");
...