Creazione di una presentazione in jQuery (non immagini)

Question

Ho un paio di elementi div contenuti in un contenitore div , e vorrei farli scorrere, mostrandone solo uno alla volta e dopo un certo timeout fai scorrere il div attualmente visibile a sinistra usando un'animazione e fai scorrere il div successivo da destra.

Il mio HTML è simile al seguente:

<div id="topMaps" style="height: 225px; overflow: hidden;">
  <div>First slide - some content here</div>
  <div>Second slide - some content here</div>
  <div>... slide - some content here</div>
  <div>n'th slide - some content here</div>
</div>

Sto usando il seguente script per questo:

var currentSlide = 1;
var numSlides = -1;
var slideSpeed = 1000;
var timePerSlide = 3500;

function nextSlide() {
    $('#topMaps div:nth-child(' + currentSlide + ')').hide("slide", { direction: "left" }, slideSpeed);
    currentSlide += 1;
    if (currentSlide >= numSlides)
        currentSlide = 1;
    $('#topMaps div:nth-child(' + currentSlide + ')').show("slide", { direction: "left" }, slideSpeed);

    setTimeout(nextSlide, timePerSlide);
}

$(document).ready(function() {
    numSlides = $('#topMaps div').length;
    setTimeout(nextSlide, timePerSlide);
});

Ma non funziona. Quando viene chiamata per la prima volta la funzione nextSlide , Firefox segnala il seguente errore:

o.easing[this.options.easing || (o.easing.swing ? "swing" : "linear")] is not a function
http://localhost/templates/front/default/js/jquery.js
Line 19

E quando aggiungo $ ('# topMaps div: nth-child (' + currentSlide + ')') nel pannello Watch in Firebug, restituisce una raccolta di 10 elementi? Non sono sicuro di cosa stia succedendo.

Forse qualcuno mi può aiutare?

modifica Ho capito il problema con il selettore, dovevo usare $ ('# topMaps > div: nth-child (' + currentSlide + ')') (nota il > ). Tuttavia non funziona ancora.

Answer 1

Pur non essendo la risposta che cercavi, hai preso in considerazione l'utilizzo del Plugin Cycle ?

Answer 2

Potrei raccomandare di impostare un ID per ogni div e chiamarlo nella funzione js nextSlide (), testare la variabile currentSlide e scegliere il div successivo Non è una buona cosa di programmazione, ma puoi almeno farlo funzionare fino a capire cosa non va in $ ('# topMaps div: nth-child (' + currentSlide + ')')