conflict starts after adding animation or transition

hi all

this below code creates 4 boxes

i want first box to remain automatically open with page loads (its working correctly)

i want to show the text on hover (its working correctly)

But as soon i add the transition, the confict and jerking starts

Code:

transition:all 1s;-moz-transition:all 1s;

the jerking and conflict is more between 3rd and 4th boxes

if i remove the "transition" then there is no conflict and jerking.

but then animation is also removed.

i want to keep the sliding animation.

i want on hover, the width of box should expand with animation or sliding effect.

also they should expand or slide in such a way that red background color does not get visible.

if i remove the transition then red background color is not visible, but animation is also not visible.

the jerking and conflict is more between 3rd and 4th boxes

Code:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> .hovericons{overflow:hidden;background:#f00; width:800px} .hovericons p{background-color:#FFCC66; font-size:18px; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; text-align:center; padding:0px; float:left; height:36px; line-height:26px; margin:0; border-left:1px solid #FFFFFF; display:block;} .hovericons p:hover{background-color:olive;} .hovericons p a{color:#FFFFFF; text-decoration:none; display:block; text-align:center; width:88px; padding:5px; margin:0; transition:width 1s;-moz-transition:width 1s; height:36px} .hovericons p:first-child a{width:488px;} </style> </head> <body> <div class="hovericons"> <p><a href="#">1<span class="ttext">first</span></a></p> <p><a href="#">2<span class="ttext">second</span></a></p> <p><a href="#">3<span class="ttext">third</span></a></p> <p><a href="#">4<span class="ttext">fourth</span></a></p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> $(".ttext").hide(); $('.hovericons p:first-child span:nth-child(1)').show(); $(".hovericons p").mouseover(function(){ $('.ttext').hide(); $(this).find('.ttext').show(); $('.hovericons p:first-child a').width(88); $(this).find('a').width(488); }); $(".hovericons p").mouseout(function(){ $('.ttext').hide(); $('p:first-child span:nth-child(1)').show(); $('.hovericons p a').width(88); $('.hovericons p:first-child a').width(488); }); </script> </body> </html>

vineet

Not perfect, but a lot better. I don't think there's anyway to have this work perfectly, there will always be a slight chance of issues in at least some browsers if the mouse moves around really fast.

Code:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> .hovericons{overflow:hidden; width:800px;} .hovericons p{background-color:#FFCC66; font-size:18px; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; text-align:center; padding:0px; float:left; height:36px; line-height:26px; margin:0; display:block;} .hovericons p:hover{background-color:olive;} .hovericons p a{color:#FFFFFF; text-decoration:none; display:block; border-left:1px solid #FFFFFF; text-align:center; width:88px; padding:5px; margin:0; height:36px} .hovericons p:first-child a{width:488px;} </style> </head> <body> <div class="hovericons"> <p><a href="#">1<span class="ttext">first</span></a></p> <p><a href="#">2<span class="ttext">second</span></a></p> <p><a href="#">3<span class="ttext">third</span></a></p> <p><a href="#">4<span class="ttext">fourth</span></a></p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($){ var ttxt = $(".ttext").hide().first().show().end(), first = $('.hovericons p:first-child a'), timer, firsttext = first.find('.ttext'), thistext, iconsa = $(".hovericons a").mouseenter(function(){ clearTimeout(timer); thistext = $(this).find('.ttext').fadeIn(); ttxt.not(thistext).hide(); iconsa.stop().not(this).animate({width: 88}, 'slow', function(){ttxt.not(thistext).hide();}); $(this).animate({width: 488}, 'slow'); }).mouseleave(function(){ timer = setTimeout(function(){ firsttext.fadeIn(); ttxt.not(firsttext).hide(); iconsa.stop().not(first).animate({width: 88}, 'slow'); first.animate({width:488}, 'slow'); }, 100); }); }); </script> </body> </html>

thanks john

this works perfect for me

vineet

Great! This might be even better (using extended 'easing') to more closely emulate the loosey goosey look/feel of the css transitions:

Code:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> .hovericons{overflow:hidden; background-color: #f00; width:800px;} .hovericons p{background-color:#FFCC66; font-size:18px; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; text-align:center; padding:0px; float:left; height:36px; line-height:26px; margin:0; display:block;} .hovericons p:hover{background-color:olive;} .hovericons p a{color:#FFFFFF; text-decoration:none; display:block; border-left:1px solid #FFFFFF; text-align:center; width:88px; padding:5px; margin:0; height:36px} .hovericons p:first-child a{width:488px;} </style> </head> <body> <div class="hovericons"> <p><a href="#">1<span class="ttext">first</span></a></p> <p><a href="#">2<span class="ttext">second</span></a></p> <p><a href="#">3<span class="ttext">third</span></a></p> <p><a href="#">4<span class="ttext">fourth</span></a></p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script type="text/javascript"> jQuery(function($){ var ttxt = $(".ttext").hide().first().show().end(), first = $('.hovericons p:first-child a'), timer, trantime = 800, ease = 'easeOutBack', firsttext = first.find('.ttext'), thistext, iconsa = $(".hovericons a").mouseenter(function(){ clearTimeout(timer); thistext = $(this).find('.ttext').fadeIn(); ttxt.not(thistext).hide(); iconsa.stop().not(this).animate({width: 88}, trantime, ease, function(){ttxt.not(thistext).hide();}); $(this).animate({width: 488}, trantime, ease); }).mouseleave(function(){ timer = setTimeout(function(){ firsttext.fadeIn(); ttxt.not(firsttext).hide(); iconsa.stop().not(first).animate({width: 88}, trantime, ease); first.animate({width:488}, trantime, ease); }, 100); }); }); </script> </body> </html>

thanks john again for this easing effect.

i had a question in my mind i would like to ask

why is adding animation so difficult in jquery

why is that we need to add so much extra code to make animation work.

this is my original code which works fine without animation

Code:

<script type="text/javascript"> $(".ttext").hide(); $('.hovericons p:first-child span:nth-child(1)').show(); $(".hovericons p").mouseover(function(){ $('.ttext').hide(); $(this).find('.ttext').show(); $('.hovericons p:first-child a').width(88); $(this).find('a').width(488); }); $(".hovericons p").mouseout(function(){ $('.ttext').hide(); $('p:first-child span:nth-child(1)').show(); $('.hovericons p a').width(88); $('.hovericons p:first-child a').width(488); }); </script>

why cant i simply replace

Code:

$('.hovericons p:first-child a').width(88);

with animate function

Code:

$('.hovericons p:first-child a').animate({width: 88}, 'slow');

why animate function doesnt work on its own.

vineet

First off you're welcome for the added easing option. you can choose from many. They're listed here:

https://api.jqueryui.com/easings/

As for your other question, you can just do what you show. It works as animation. But unlike simply changing the width, animation occurs over time, so doing more than one of them at once is trickier. And you need to handle what to do if an opposite animation is called for before the current one is finished. Even that said, most of the differences between your code and mine are what I consider best practices, and have little to do with animation. Most just have to do with how I write code, things like minimizing lookups and protecting variables.

And here's a minor improvement:

Code:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> .hovericons{overflow:hidden; background-color: #f00; width:800px;} .hovericons p{background-color:#FFCC66; font-size:18px; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; text-align:center; padding:0px; float:left; height:36px; line-height:26px; margin:0; display:block;} .hovericons p:hover{background-color:olive;} .hovericons p a{color:#FFFFFF; text-decoration:none; display:block; border-left:1px solid #FFFFFF; text-align:center; width:88px; padding:5px; margin:0; height:36px} .hovericons p:first-child a{width:488px;} </style> </head> <body> <div class="hovericons"> <p><a href="#">1<span class="ttext">first</span></a></p> <p><a href="#">2<span class="ttext">second</span></a></p> <p><a href="#">3<span class="ttext">third</span></a></p> <p><a href="#">4<span class="ttext">fourth</span></a></p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script type="text/javascript"> jQuery(function($){ var ttxt = $(".ttext").hide().first().show().end(), first = $('.hovericons p:first-child a'), timer, trantime = 800, ease = 'easeOutBack', firsttext = first.find('.ttext'), thistext, iconsa = $(".hovericons a").mouseenter(function(){ clearTimeout(timer); thistext = $(this).find('.ttext').fadeIn(); ttxt.not(thistext).stop(true, true).hide(); iconsa.stop().not(this).animate({width: 88}, trantime, ease); $(this).animate({width: 488}, trantime, ease); }).mouseleave(function(){ timer = setTimeout(function(){ firsttext.fadeIn(); ttxt.not(firsttext).stop(true, true).hide(); iconsa.stop().not(first).animate({width: 88}, trantime, ease); first.animate({width:488}, trantime, ease); }, 100); }); }); </script> </body> </html>

The stop() function allows us to interrupt any transition on the selected elements and (if desired) perform another. It's really just a game of telling it what you want it to do. If you like, I could give you a documented version that might make things clearer. Let me know.

Hi john

i agree with you. we have to follow best practices in jquery.

when i took the short route and cut short the code, then it didnt worked as expected.

we need to keep in mind other elements behaviours also.

its tricky.

vineet