[JS/JQ]Effect werkt op 1 slide niet

[BryanD]

Beste tweakers,
ik heb zelf een kleine carousel gemaakt die met een bullet systeempje werkt en die een achtergrond plaat, een voorgrond plaat, een button en een stukje tekst (h1) laat rouleren.

Dit werkt inprincipe prima met een jQuery / JS combo echter nu heb ik een klein probleempje.

het volgende effect word uitgevoerd op de slide's:

code:

// Fade out
        currentSlide.children("img").animate({"opacity":"0"},defaults.AnimationTime);
        currentSlide.children(".content").children("h1").animate({"right":"1500","opacity":"0"},defaults.AnimationTime);
        currentSlide.children(".content").children(".btn").animate({"right":"1500","opacity":"0"},defaults.AnimationTime);
        currentSlide.children(".content").children(".photo").animate({"left":"1500","opacity":"0"},defaults.AnimationTime,function(){
            currentSlide.addClass("hide");
        });

// fade in
nextSlide.removeClass("hide");
        nextSlide.children("img").animate({"opacity":"1"},defaults.AnimationTime,function(){
            nextSlide.children(".content").children("h1").animate({"right":"420px","opacity":"1"},defaults.AnimationTime);
            nextSlide.children(".content").children(".btn").animate({"right":"579px","opacity":"1"},defaults.AnimationTime);
            nextSlide.children(".content").children(".photo").animate({"left":"569px","opacity":"1"},defaults.AnimationTime);
        });

Dit ziet er leuk uit en werkt, echter zodra de carousel bij de laatste slide is aangekomen en hij terug moet naar 1 fade hij helemaal niet uit en slide hij niet weg, maar hij verdwijnt gewoon, en de achtergrond plaat fade wel door naar de achtergrond van de eerste slide.

Heeft iemand enig idee wat hier aan de hand is? ik kan me vinger er niet op leggen namelijk. Echter heb ik zo'n voorgevoel dat de browser te veel rekenwerk moet gaan doen o.i.d.
Als jullie meer code willen hebben zeg maar en ik post het gehele script wel. Ik heb al geprobeerd om de opacity weg te halen, maar dat haalt ook niets uit, de laatste slide verdwijnt gewoon...

Behalve bovenstaande effecten heb ik geen enkel effect nergens staan, de rest is alleen maar berekeningen en het accomoderen van de bullet clicks.

Bijvoorbaat dank,

[Bosmonster]

Is je nextSlide niet nog hidden van de animatie?

Ga even langs wat je moet doen voor een animatie van X naar Y.

[BryanD]

Bedankt voor de snelle reply bosmonster, dat was het wel, ik heb de hide nu ge-removed zodra de .photo klaar is met animeren, dit werkt nu wel, echter nu gaat mijn background schokkerig, maar daar kom ik vast wel uit.
bedankt!

[BryanD]

Hallo beste tweakers, wederom de vraag van mijn kant.
De animatie's blijven falen.

Dit is inmiddels de animatie

code:

        // Remove them
        nextSlide.removeClass("hide");
        currentSlide.children(".content").children("h1").animate({"right":"1500","opacity":"0"},defaults.animationTime);
        currentSlide.children(".content").children(".btn").animate({"right":"1500","opacity":"0"},defaults.animationTime);
        currentSlide.children(".content").children(".photo").animate({"left":"1500","opacity":"0"},defaults.animationTime);     
        nextSlide.children("img").animate({"opacity":"1"},defaults.AnimationTime,function(){
            
            currentSlide.addClass("hide");
            nextSlide.children(".content").children("h1").animate({"right":"420px","opacity":"1"},defaults.AnimationTime);
            nextSlide.children(".content").children(".btn").animate({"right":"579px","opacity":"1"},defaults.AnimationTime);
            nextSlide.children(".content").children(".photo").animate({"left":"569px","opacity":"1"},defaults.AnimationTime);
        
        });

De ene keer verdwijnt de content zomaar en de andere keer verdwijnt de achtergrond zomaar. En ik begin het gevoel te krijgen dat dit iets met de Z-index te maken heeft, dit is de HTML;

code:

    <div class="slide">
        <div class="content">
            <h1><strong>Arga Dienstverlening is &uacute;w specialist op het gebied van klauwverzorging. Wij leveren advies op maat, beschikken over goed gereedschap en leveren ook veebenodigdheden.</strong></h1>
            <a href="offerte-aanvragen.html" class="photo"><img src="img/content/header-01.png" alt="" /></a>
            <a class="btn" href="offerte-aanvragen.html">
                <span class="fir">Interesse?</span>
                <span class="sec">Offerte aanvragen</span>
            </a>
        </div>
        <img src="img/content/header-01.jpg" alt="" />
    </div>

    <div class="slide hide">
        <div class="content">
            <h1>
                <strong>U kunt ons vinden op:<br />
                Delfstraat 41, 9919 BE Loppersum<br /><br />
                Telefoonnummer: 0596 - 572 286</strong>
            </h1>
            <a href="offerte-aanvragen.html" class="photo"><img src="img/content/header-02.png" alt="" /></a>
            <a class="btn" href="offerte-aanvragen.html">
                <span class="fir">Vragen?</span>
                <span class="sec">Neem contact op</span>
            </a>
        </div>
        <img src="img/content/header-02.jpg" alt="" />
    </div>

    <div class="slide hide">
        <div class="content">
            <h1><strong>Arga dienstverlening levert voor uw vee ook veebenodigdheden. Zo leveren wij onder andere gereedschappen, voedingssupplementen klossen en messen.</strong></h1>
            <a href="offerte-aanvragen.html" class="photo"><img src="img/content/header-03.png" alt="" /></a>
            <a class="btn" href="offerte-aanvragen.html">
                <span class="fir">Interesse?</span>
                <span class="sec">Onze webshop</span>
            </a>
        </div>
        <img src="img/content/header-03.jpg" alt="" />
    </div>

    <div class="slide hide">
        <div class="content">
            <h1 class="large">
            <strong>&quot;Meer dan 70 procent van de koeien, heeft tenminste 1 aandoening op het moment van koppelbekappen&quot;<br /><br />
            Daarom is het van essentieel belang dat de koeien op tijd en regelmatig bekapt worden. Mijn doel is dan ook om...</strong>
            </h1>
            <a href="offerte-aanvragen.html" class="photo"><img src="img/content/header-04.png" alt="" /></a>
        </div>
        <img src="img/content/header-04.jpg" alt="" />
    </div>

Echter als ik een Z-Index er inzet per div (class slide) waarbij de bovenste div de hoogste heeft, de tweede heeft de één-na-hoogste etc. etc.
Echter helpt dat niet.
Weet iemand wat hier fout gaat?

B.v.d,

[X-Lars]

Heb niet goed naar je code gekeken, maar vraag me af of jij wel goed in bijv. Firebug de DOM inspecteert op interessante properties en wellicht op tactische punten wat debug informatie naar de console stuurt?

[BryanD]

Ik gebruik meestal gewoon alert, maar goed. Ja ik gebruik firebug, en in principe doet hij gewoon keurig wat hij vertelt word, alleen op scherm zie je het niet goed gebeuren

[Bosmonster]

We kunnen dit wel voor je gaan debuggen, maar dat lijkt me ook niet de bedoeling. (en daar hebben we de code niet voor).

Dit is namelijk geen script- of programmeerprobleem, maar puur en alleen een debugprobleem. Ergens in je routine gaat iets niet goed. Voor ons is dat koffiedik kijken. Jij kunt in Firebug gewoon de status van de elementen controleren. Waarschijnlijk zie je dan vrij rap wat het probleem is.

[ Voor 55% gewijzigd door Bosmonster op 04-01-2011 09:55 ]