does anyone know how to do this css transition? [closed] - css

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am killing my neurons trying to figure out how to do this website's navigation bar with css transitions or animations: http://tabu.realitatea.net/ .
Does anybody know how to do it ? or even give me a starting point ?

Answer 1

This was pretty fun to make, check it out. https://jsfiddle.net/6brsm2zt/
JS
var slider = $('#slider');
$('div').on('mouseenter','a',function(){
var box = $(this);
var p = box.position();
slider.animate({
width: box.outerWidth(),
left: p.left,
},250);
})
$('div').on('mouseleave','a',function(){
slider.stop();
})
$('div').on('mouseleave',function(){
$('#slider').animate({
width: 0,
left: 0,
},200);
})
The basic idea is to have a zero width div on the left, let's call it a slider. When you mouse over an item, you set the width and left position of the slider to be equal to the width and left position of the item. The duration of the animation is quite short, about a third of a second, to give the feeling of responsiveness.
When you mouse off the bar entirely, just set the width and left position of the slider to 0 with a short duration, say 200 ms, and it'll zoom off to the side.
One tricky part is when you wave the mouse back and forth. Originally, the div would play the transition for each item, leaving me waiting for the slider to finally come to my mouse. I solved this by cancelling the animation when i mouse off an item. Since the event order for mousing between items is mouseenter -> mouseleave -> mouseenter, i already had a transition for mouseenter ready to go. Now the slider will chase your mouse relentlessly :D.