Как правильно остановить анимацию в jQuery?

Question

[iQuasar]

Подскажите, пожалуйста. Кнопки иногда начинают появляться сразу, как item начал увеличиваться, а иногда после задержки(при первом ховере кнопки появляются на цене, а при последующих уже нормально. И еще мне надо, чтобы они появлялись вместе с текстом, но иногда появляется непонятная небольшая задержка). С чем это связанно? И главный вопрос, собственно. Если сразу отвести мышку, то с кнопками происходит какая-то беда. Stop прекрасно работает с item-name и descr, а вот кнопки чет не хотят останавливать анимацию и не отображаться. Я и с finish пробовал, и так и сяк, все равно получается бред. Как это исправить?

https://codepen.io/anon/pen/rrvqaX
Я понимаю, что дело в animate, но по другому никак не переместить их вниз. Можно конечно самому изменять высоту с учетом появляющихся надписей и кнопок, но чет это сложновато для меня :(
p.s. я пока только учусь)

Answer 1

[profesor08]

Ты мог зайти с другого конца, и не аниммировать margin, а прилепить кнопку в самый низ top:100, а потом slideDown...

Вместо .mouseover лучше используй .on("mouseover", function() {}), а вместо самого mouseover, используй mouseenter. И разберись как они работают изнутри.

И приведи свой код в порядок.

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

https://codepen.io/Profesor08/pen/NBMEEr

Comments

[iQuasar]

Друг, спасибо большое. Что ты имеешь ввиду по поводу порядка в коде? Если это не насчет js, то что не так делаю?

Answer 2

[Stalker_RED]

Можно переделать все на css, из скриптов только классы менять. Причем большая часть всей этой красоты делается вообще без скриптов, через обычный css hover.
jsfiddle.net/3g8cbtfv (оно немножко дергается потому, что мне лень полностью разбираться с вашими абсолютами натыканными не к месту.)