Witam

Mam pytanie dotyczące animacji slidera jqery. Potrzebuje aby każdy slajd wsuwał się na stronę od prawej strony, a przy znikaniu - zanikał lub ew.zostawał na miejscu a w jego miejsce pojawial się następny.. Nie wiem jak to zrobić...

próbowałam wg:
http://css-tricks.github.io/AnythingSlider...l#&panel1-1


oto mój kod..:
-----------------------
<div id="slider">
<div data-animate="bounceInRight, rotateOutDownRight"><img src="images/1_slideshow.png" alt=" " /></div>
<div data-animate="bounceInRight, rotateOutDownRight"><img src="images/2_slideshow.png" alt=" " /></div>
<div data-animate="bounceInRight, rotateOutDownRight"><img src="images/3_slideshow.png" alt=" " /></div>
</div>
------------------------

$('#slider').anythingSlider({
expand: true,
buildNavigation: true,
buildArrows: false,
buildStartStop: false,
appendNavigationTo: null,
autoPlay: true,
startStopped: true,
playRtl: false,
animationTime: 5000,
autoPlayLocked: true,
navigationFormatter : function(index, panel){
return ""; // This would have each tab with the text 'Panel #X' where X = index
}
}); //koniec anythingSlider

$('#slider').anythingSliderFx({
});
-------------------------

załączone pliki:

<link rel="stylesheet" type="text/css" href="js/anythingslider/css/anythingslider.css" />
<link rel="stylesheet" type="text/css" href="js/anythingslider/css/animate.css" />
<script language="javascript" type="text/javascript" src="js/jquery_1.10.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script language="javascript" type="text/javascript" src="js/anythingslider/js/jquery.anythingslider.js"></script>
<script language="javascript" type="text/javascript" src="js/anythingslider/js/jquery.anythingslider.fx.js"></script>


niestety nie wiem czemu - ale animacja nie działa- slajdy przesuwaja się od prawej do lewej.
dodam, ze obserwujac w firebug widze - ze klasy bounceInRight i rotateOutDownRight są dodawane...i się zmieniają...

---------------------
Wiem, ze taki efekt można też osiągnąć tak jak tutaj:
http://css-tricks.github.io/AnythingSlider...-1&panel3-1

ale niestety nie wiem do końca jak... choć jest opisane - niestety nie wychodzi mi jak powinno...- nie bardzo mogę się w tym połapać...






ok. klopot rozwiazany. Wystarczylo dodac klase:

<div id="slider">
<div data-animate="bounceInRight, rotateOutDownRight" class="animated"><img src="images/1_slideshow.png" alt=" " /></div>
<div data-animate="bounceInRight, rotateOutDownRight" class="animated"><img src="images/2_slideshow.png" alt=" " /></div>
<div data-animate="bounceInRight, rotateOutDownRight" class="animated"><img src="images/3_slideshow.png" alt=" " /></div>
</div>


(może komuś się to przyda)

Pozdrawiam


hmm... a jednak to nie do końca działa zgodnie z oczekiwaniami...

http://css-tricks.github.io/AnythingSlider...l#&panel1-1

są tu animacje wejścia i wyjścia... czyli slajd jest animowany przy wejsciu i przy wyjściu... czy da radę zrobić tak, aby slajd, który się pojawia przykrywał ten, który jest obecnie (najeżdzał na aktualnie widoczny,a widoczny nie znikał tylko był przysłaniany)? czy ktoś wie, jak to zrobić?