Reputation: 573
I'm trying to get this work, but can not understand, what causing the problems.
need any help. thx
Upvotes: 0
Views: 241
Reputation: 4955
Your code looked quite complex so I've cut it right back to basics and then applied simple styling/jQuery animate effects. So:
<div class='slogan_switch'>
<div class='slogan_switch_item inactive'>
<div class='ssi_arrow_active'><div class='ssi_arrow_inactive'></div></div>
<div class='ssi_text_left'></div>
<div class='ssi_text_body'>Test Text</div>
<div class='ssi_text_right'></div>
</div>
....etc
</div>
has been changed to a more semantic, and cleaner/leaner, unordered list:
<ul class='slogan_switch'>
<li><a href="#">Test Text 1</a></li>
<li><a href="#">Test Text 2</a></li>
<li><a href="#">Test Text 3</a></li>
<li><a href="#">Test Text 4</a></li>
</ul>
I've not implemented all of the effects you had going on in your initial fiddle, but hopefully this is something you can work on a little to finish off in style! http://jsfiddle.net/ZUd27/4/
Updated: Following on from your comment, I've amended the jQuery to allow an element to be active on page load and then to activate the other elements on hover: http://jsfiddle.net/ZUd27/13/
Upvotes: 1