CODEWITHSUNDEEP
jqueryhtmlcsstransitionsmoothing
nick
nick

Reputation: 3227

jQuery smooth transition on .removeClass / .addClass atr

i'm doing a "image gallery" with css and jquery and I want to switch between images by clicking buttons. I've done it with remove/add class because it's easier and i know i can do it with "animate" but it's very complicated for me.

I don't want to use pre-made sliders, so, if you can help me, i would aprecciate that!

JsFiddle:

http://jsfiddle.net/CWkQE/

i'd like that something like this could be possible:

$("something").addClass("someclass",1000); /* i mean adding ,1000 */

Upvotes: 3

Views: 2750

Answers (1)

Kaspars Ozols
Kaspars Ozols

Reputation: 7017

If I understood you correctly, you want to make smooth transform when switching between images. One workaround would be putting both elements one on top of another using absolute positioning and just use fadeIn and fadeOut functions which take milliseconds as optional parameter.

Simplified sample would be something like this.

HTML:

<ul>
    <li id="element1">A</li>
    <li id="element2" class="hide">B</li>
</ul>

CSS:

ul {position: relative; height: 200px; }
li {position: absolute; }
.hide {display: none;}

Then instead of:

$("#element1").addClass("hide")
$("#element2").removeClass("hide")

you can do 

$("#element1").fadeOut(1000)
$("#element2").fadeIn(1000)

See the concept with your sample here: http://jsfiddle.net/CWkQE/14/

Upvotes: 6

Related Questions