javascript - Advice on better way to program jquery animation -
i have list of social icons when hovered on increase in width reveal more content while rest decrease width keep overall ul width same. wondering if tell me if way did or if there better way of doing it. still trying learn jquery , best practices.
also seems working except last list item drop down occasionally. i'm thinking has hovered items width increasing @ different rate other items decreasing.
here have (note facebook has content associate @ moment):
$(function() { $('.social-container > li').on({ mouseenter: function () { $('.social-container > li').stop().animate({'width':'16%'},400); $(this).stop().animate({'width':'50%'},400).queue(function(){ $(this).find(".icon-placeholder").hide(); $(this).find(".icon-link").stop().fadein("slow").show(); $(this).dequeue(); }); }, mouseleave: function () { $('.social-container > li').stop().animate({'width':'25%'},400); $(this).stop().animate({'width':'25%'},400); $(this).find(".icon-link").stop().fadeout("slow").hide(); $(this).find(".icon-placeholder").show(); } }); });
a better way achieve via css animation. have prepared jsfiddle show main idea: https://jsfiddle.net/uuwdr5ly/3/
here css code make animation possible:
ul.social-container > li{ -webkit-transition: 0.4s; -moz-transition: 0.4s transition: 0.4s; width:75px; } ul.social-container > li:hover {width:150px}
also take @ jsfiddle because change more css in order make work code.
Comments
Post a Comment