[JQ] FadeIn verspringt ipv animeert*

[BryanD]

Beste tweakers,

Ik heb een kleine carousel en die werkt (op het moment) alleen met fade.
Dus ik gebruik fadeIn en fadeOut.

Dit is het stukje wat daadwerkelijk de animatie uit voert:

JavaScript:

function animation(object,selection,timer,callback){
        
        if(timer === undefined || timer == null || timer == false || timer == ""){ timer = 500 } 
        if(selection == "in"){
            object.stop().fadeIn(timer);
        }else if (selection == "out"){
            object.fadeOut(timer);
        }else{
            object.fadeOut(timer);
        }
        
        if(jQuery.isFunction(callback)){ callback.call(this); }
    }

object = een DOM element dat geanimeerd word
selection = of het een fade in of out moet worden
de rest spreekt voorzich zelf.

en dit is vervolgens het stukje wat de animatie's aan roept:

JavaScript:

animation(getState("current"),"out", 1000,function(){
                var next = getState("next");
                getState("current").removeClass("active");
                next.addClass("active");
                animation(next,"in", 1000);
            });

getState = functie die volgende slide op haalt, dat werkt ook allemaal.
Animation uit werkt perfect, echter animation in verspringt direct. Is direct van 0% opacity naar 100.
Zou iemand mij kunnen uitleggen waarom mijn fadeIn per direct verspringt?

B.v.d,

[ Voor 0% gewijzigd door BtM909 op 27-01-2011 11:14 ]

[noes]

getState("current").removeClass("active");
next.addClass("active");

Heb je CSS gekoppeld aan deze klasse? Post die eens? Mijn verwachting is dat je .active{ display: block} hebt staan en je normale slides display: none; hebben.

Daardoor switch je je visibility al, dus doet je animatie niets.

[BryanD]

Nope
Al naar gekeken dit is de CSS:

Cascading Stylesheet:

#carousel img { display: none }

carousel is de omringede div. En voor de rest heb ik geen enkele CSS die op toepassing is voor de carousel div, of de images.

edit: html structuur:

HTML:

<div id="carousel">
        <img src="img/content/img1.jpg"  class="img1" alt="Foto Carousel" />
        <img src="img/content/img2.jpg" class="img2 " alt="Foto Carousel" />
        <img src="img/content/img3.jpg" class="img3 " alt="Foto Carousel" />
        <img src="img/content/img1.jpg" class="img3 " alt="Foto Carousel" />
        <img src="img/content/img1.jpg" class="img3 " alt="Foto Carousel" />
    </div>

classes zijn voor de tekst die er bij komt (staat ook in carousel div, maar staat hier verder los van.


Edit 3:
ik weet wat het probleem is: mijn callback functie werkt niet helemaal flekkeloos.
De callback word gewoon direct aangeroepen inplaats van als de animatie klaar is, moet ik hiervoor een setTimeout gebruiken of hoe kan dit beter?
wederom de callback code:

code:

if(jQuery.isFunction(callback)){ callback.call(this); }

[ Voor 86% gewijzigd door BtM909 op 27-01-2011 11:15 ]

[Verwijderd]

Je kan dit het beste doen met de callback parameter. Hier kan je een functie zetten die wordt uitgevoerd als de animatie is afgelopen:

JavaScript:

fadeIn(timer,function () {
//Functie die wordt uitgevoerd als de animatie voltooid is
});

[BryanD]

Dankje voor de suggestie melay, heb ik ook al geprobeerd, werkt ook niet, hij blijft in een keer infaden.
Dit omdat er geen functie uitgevoerd word zodra de animatie compleet is, dat is namelijk het laatste wat er gebeuren moet.

Ik zal zometeen de hudige versie even posten

[BtM909]

ipv een volledige versie, kan je misschien een uitgeklede debugbare versie posten?

[BryanD]

Bij deze (geen link want ik heb atm geen beschikking over een webserver waar dat even op kan)

HTML:

    <div id="carousel">
        <img src="img/content/foto1.jpg" class="nummer1" alt="Foto Carousel" />
        <img src="img/content/foto2.jpg" class="nummer2" alt="Foto Carousel" />
        <img src="img/content/foto3.jpg" class="nummer3" alt="Foto Carousel" />
        <img src="img/content/foto4.jpg" class="nummer2" alt="Foto Carousel" />
        <img src="img/content/foto5.jpg" class="nummer3" alt="Foto Carousel" />
        
        <div class="text nummer1">Dit is tekst 1</div>
        <div class="text nummer2">Dit is tekst 2</div>
        <div class="text nummer3">Dit is tekst 3</div>
    </div>

--CSS--

Cascading Stylesheet:

#carousel img { display: none; }
#carousel div.text { opacity: 0; }

-- Animatie --

JavaScript:

setInterval(function(){
    var next = getState("next");
    var current = getState("current");
    next.addClass("active");
    next.fadeIn(0,'linear',function(){ 
        current.fadeOut(500,function(){
            current.removeClass("active");  
        });
    }); 
    
},5000);

-- getState --

JavaScript:

function getState(selection){
    if(selection == "current"){
        currentImage = carousel.find(".active");
        return currentImage;
    }else if(selection == "next"){
        nextImage = carousel.find(".active").next("img");
        if(nextImage.length == 0){ nextImage = carousel.children("img").eq(0);  }
        return nextImage;
    }
}

[BtM909]

Dan plaats je toch een complete testset (alles inline) die men kan saven en (lokaal) testen? Je wilt niet weten hoeveel verschillende versies je uiteindelijk overhoud als je alles gesnipt aanbiedt

[BryanD]

Dan bij dezen

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    // cache DOM
    var carousel = $("#carousel");
    if(carousel.find(".active").length == 0){ carousel.children("img").eq(0).fadeIn(0).addClass("active");  }
    var currentImage;
    var nextImage;
    function getState(selection){
        if(selection == "current"){
            currentImage = carousel.find(".active");
            return currentImage;
        }else if(selection == "next"){
            nextImage = carousel.find(".active").next("img");
            if(nextImage.length == 0){ nextImage = carousel.children("img").eq(0);    }
            return nextImage;
        }
    }
    
    // animatie
    function animation(){
        var next = getState("next");
        var current = getState("current");
        next.addClass("active");
        next.fadeIn(0,'linear',function(){ 
            current.fadeOut(1000,function(){ // HIER GAAT HET DUS FOUT!!! dit gaat te snel
                current.removeClass("active");    
            });
        }); 
    }
    
    // Interval
    setInterval(function(){
        animation();
    },5000);
});
</script>
<style type="text/css">
* { margin: 0; }
html { height: 100%; }
body {
    height: 100%;
    background: #5c0c0c;
    font: 18px/20px Georgia, "Times New Roman", Times, serif;
    color: #fff;
    overflow: hidden;
    }
    a { outline: 0; }
    a:hover { }
    a img { border: 0; }
    h1, h2 { font: normal 36px/46px 'Excelsior', Georgia, "Times New Roman", Times, serif; line-height: normal; }
    h1 { }
    h2 { }
    p { margin: 0 0 30px; }
#container {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
    }
#carousel img { display: none; }
#carousel div.text { opacity: 0; }
</style>
</head>

<body>

<div id="container">
    
    <div id="carousel">
        <img src="img/content/foto1.jpg" class="nummer1" alt="Foto Carousel" />
        <img src="img/content/foto2.jpg" class="nummer2" alt="Foto Carousel" />
        <img src="img/content/foto3.jpg" class="nummer3" alt="Foto Carousel" />
        <img src="img/content/foto4.jpg" class="nummer2" alt="Foto Carousel" />
        <img src="img/content/foto5.jpg" class="nummer3" alt="Foto Carousel" /> 
        
        <div class="text nummer1">Dit is tekst 1</div>
        <div class="text nummer2">Dit is tekst 2</div>
        <div class="text nummer3">Dit is tekst 3</div>
    </div>

</div>

</body>
</html>

Plaatjes zul je zelf even moeten kijken

[BtM909]

Heb je weleens gekeken naar de chaining mogelijkheden binnen jQuery?

http://www.learningjquery.com/2007/01/effect-delay-trick
http://snipplr.com/view/39212/timeout-jquery-efffect/

?

[BryanD]

delay heb ik al geprobeerd ja, echter werkte dat niet. Verder is de andere optie één die ik liever niet gebruik (setTimeout).

Ik wil dit gewoon normaal kunnen doen.

[BtM909]

setTimeout wordt juist niet aangeraden, vandaar de delay

Maar werkt echter niet Heb je die voorbeelden gezien... Die werken gewoon (delay of idle)

[R4gnax]

BtM909 schreef op donderdag 27 januari 2011 @ 17:00:
setTimeout wordt juist niet aangeraden, vandaar de delay

jQuery.fn.delay maakt intern gebruik van setTimeout, dus afgezien van de schonere syntax maakt het echt geen verschil.

Verder heeft zijn er ook de nodige problemen (geweest?) in combinatie met jQuery.fn.stop: timeouts die niet correct met clearTimeot weg gehaald worden, maar alsnog uitgevoerd worden en vervolgens je animatie queue corrupt maken...

[BtM909]

Ik heb geen ervaring met jQuery, dus plaats hier alleen m'n Google resultaten

[BryanD]

Is al opgelost heren, bleek dat de klant zowieso een andere animatie wou
Is dus al klaar.