Почему каллбэк криво отработал?

Question

[web-quest3]

https://jsfiddle.net/1obpwgvk/
Мы видим тут как прыгают если наводить...то есть коллбэк не отрабатывает или что не так?

Answer 1

[Alexander Pushkarev]

Вот так будет правленьее https://jsfiddle.net/1obpwgvk/1/

Comments

[web-quest3]

Alexander Pushkarev ну понятно хайд удаляет с потока но...блин это лаг ДЖКЮ? или так коллбек и должен был неотработать с фэйдами?

[Alexander Pushkarev]

web-quest3: https://jsfiddle.net/u13o6xw0/

[Kovalsky]

web-quest3: без негатива, но перестаньте пожалуйста задавать такое количество вопросов по одной и той же теме. Вам уже один вопрос модераторы удалили, за то что вы в нем предложили тостеру побеседовать на тему "почему jquery работает не так как я хочу". Клянусь Девятью, в интернетах (а вероятно и на тостере) есть много информации о том, как работают $-анимации и как бороться с некоторыми эффектами, нет нужды по каждому мелкому нюансу постить новый вопрос.

[web-quest3]

Alexander Pushkarev: нет не то, вы изменили до неузнаваемости пример, в итоге так и не понятно как починить

[web-quest3]

Никита Полевой: ну код я написал разве трудно поправить?) я ж искал наверное....даже здесь не может никто сказать почему вот такие карусели, я сделал все как в документации и итог такой..

[web-quest3]

Никита Полевой: то отформатируй код то закинь на фидл то иди в гугл а решений ноль) реально конкретный вопрос поставил.. пришел сюда значит не мог найти

[Kovalsky]

web-quest3: вы правы, код мне поправить не трудно. Но только тостер это не образовательная площадка. Чуть меньше чем все пользователи тостера знают как исправить ваш код, только не рассказывают вам об этом, ибо 1) подобные вопросы обсосаны десятки раз почти на всех форумах, 2) каждый день на тостере динамят по 5-10 человек уверенных в том, что их проблему за них здесь решат только потому что "ну чо, сложно что ли"

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

tldr: это ваша ошибка, у вас колбэк запускается раньше.

Вот, я чуть-чуть переделал ваш пример, посмотрите и расскажите что происходит по клику на link. Если вы думаете что это пустой вопрос, то как раз нет - ответив на него вы поймёте в чем ошибка.

[web-quest3]

Никита Полевой: Хорошо на вопрос я отвечу, по клику мы биндим событие на ссылку, в нем вызываем функцию в которо йотменяем все дэфолтные действия элемента, потом выбираем соответствующий там, скрываем, и показываем, в том то и дело как по мне, хоть я указжу 150000 секунд они должны пройти а после вызваться коллбэк, но он вызывается сразу же...

[Kovalsky]

web-quest3: а теперь моя версия. По клику на link:
1. Выполняется fadeOut для всех элементов удовлетворяющих селектору '.third',
2. После чего для каждого из элементов предыдущего пункта выполняется fadeIn для activeMenu,

Вот вам ещё куски документации, объясняющих в чем именно ваша ошибка:

If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

Note: To avoid unnecessary DOM manipulation, .fadeOut() will not hide an element that is already considered hidden.

Теперь понятно?

[web-quest3]

Никита Полевой: из-за количества селекторов выходит там...правда не понятно ну 3 раза будет коллбэк ну это коллбэк он должен все равно отработать только после завершения.....то есть 3 раза завершили и тогда уже...и то что не скрывает все равно я виду по свойствам - дисплей нон значит скрывает, да уж пока ничего так и не понял...но спасибо за старания

[Kovalsky]

web-quest3:

Факт №1: вы выполняете fadeOut для всех элементов с классом third,

Факт №2: один из этих элементов всегда скрыт, поэтому он не анимируется,

Таким образом можно придти к выводу, что в вашем коде есть логическая ошибка: независимо от того скрыт или не скрыт элемент, колбэк для него выполняется. То есть если элемент не скрыт, то колбэк выполняется после анимации, а если скрыт - то сразу же, т.к. нечего анимировать. Иллюстрация:

HTML:

<div class="third" style="display: none;"></div>
<div class="third"></div>

JS:
$( '.third' ).fadeOut( 250, callback );

В этом примере функция callback будет выполнена дважды: моментально для первого элемента (т.к. он скрыт) и через 250мс для второго.

Так происходит и у вас.

[web-quest3]

Никита Полевой: Теперь понял спасибо большое, что мне почитать подскажете?)))

[Kovalsky]

web-quest3: почитать? По какому предмету? Если вы имеете в виду JS/jQ, то в принципе любая профильная литература пойдёт впрок, O'Reilly например