Kotanet
Kotanet

Reputation: 573

Jquery and animate, cant get classes to change properly

I'm trying to get this work, but can not understand, what causing the problems.

http://jsfiddle.net/ZUd27/3/

need any help. thx

Upvotes: 0

Views: 241

Answers (1)

dodger
dodger

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

Related Questions