CODEWITHSUNDEEP
jqueryhtmlcssanimationjquery-animate
user1542801
user1542801

Reputation:

animate div to li element jquery

Hello to everyone I do not understanding how can I animate "div" to "li" element I have got horizontal list and I need to animate my arrow to clicked element.

<ul class="tabs-titles">
    <li><a href="#tab-1">best <br/> gifts</a></li>
    <li><a href="#tab-2">best <br/> gifts</a></li>
    <li><a href="#tab-3">best <br/> for gifts</a></li>
    <li><a href="#tab-4">best <br/> gifts</a></li>
    <li><a href="#tab-5">best <br/> gifts</a></li>
    <li><a href="#tab-6">best <br/> gifts <br/> gifts</a></li>
</ul>
<div class="active-tab"></div>

here is my fiddle.

Upvotes: 0

Views: 378

Answers (2)

Liftoff
Liftoff

Reputation: 25412

As I see that @Kevin has posted a very good answer, I suggest you use his, however, for completeness, I'll post another approach. Note that it is not perfect and would require some fine tuning to fit any final situation, but it will work.

This'll get the job done:

http://jsfiddle.net/9E2WQ/9/

By using the base height and the number of the tab, you can determine the proper height for each of the links. The only thing you may have to watch out for is:

var dist = 22 + (num-1)*($(this).height()+(parseInt($(this).css("marginTop"))*2));

This requires all of the links to be the same height. If you want any of the links to be a different height, you will need a different way to calculate the distance from the top of the div.

Upvotes: 0

Kevin Cittadini
Kevin Cittadini

Reputation: 1469

http://jsfiddle.net/9E2WQ/5/

This works. Take a look to my edits. You have to use $(this).position().top + $(this).height()/2 instead of parent.height() to get the arrow move.

Have fun!

Upvotes: 2

Related Questions