Jquery en flash met een .animate opactity

[Verwijderd]

Hoi allen. ik probeer een leuk effect uit op mn eigen website. het is de bedoeling dat de normale header inklapt vervolgens een zwart veld (dus een logoloze header) uitvouwt en daarna de flash inlaad voor een slideshow.
echter krijg ik een knipperend brak effect
zie: http://kayintveen.com/pho...133&catid=1:home&Itemid=2

iemand een idee / oplossing?

ik doe nu het volgende

code:

setTimeout ('$("#banner").animate({height: "0"},{duration:500});', 800); 
setTimeout ('$("#banner2wrap").animate({opacity: "show",height: "650"},{duration:500});', 2400); 
setTimeout ('$("#banner2").animate({opacity: "show"},{duration:200});', 4000);

code:

        <div id="banner2wrap" style="display:none; background:#000; border-top:1px solid #333;border-bottom:1px solid #333">
        <div id="banner2" style="">
        <FLASH>
        </div>
        </div>

*vermind de inline style dat agat uiteindelijk natuurlijk wel gewoon extern.

iemand een idee? misschien een soort van settimeout op het inladen van flash?

[Verwijderd]

ahh opgelost

<div id="banner2" style="">
moest
<div id="banner2" style="display:none;"> zijn

[harrald]

geen dank
(edit: komt wel herkenbaar over, pas als je hulp vraagt zie je het zelf opeens )

[ Voor 77% gewijzigd door harrald op 20-05-2009 09:38 ]

[Bosmonster]

JavaScript:

$(function() {
                    $('.gall1').hover(function(){ $(".gall1 .galltitle").animate({opacity: "0.8", height: "103", width: "209", background:"#000"},{duration:500}); }, function(){ $(".galltitle").animate({height:"0",opacity:"hide"},{duration:300});});
                    $('.gall2').hover(function(){ $(".gall2 .galltitle").animate({opacity: "0.8", height: "103", width: "209", background:"#000"},{duration:500}); }, function(){ $(".galltitle").animate({height:"0",opacity:"hide"},{duration:300});});
                    $('.gall3').hover(function(){ $(".gall3 .galltitle").animate({opacity: "0.8", height: "103", width: "209", background:"#000"},{duration:500}); }, function(){ $(".galltitle").animate({height:"0",opacity:"hide"},{duration:300});});
                    $('.gall4').hover(function(){ $(".gall4 .galltitle").animate({opacity: "0.8", height: "103", width: "209", background:"#000"},{duration:500}); }, function(){ $(".galltitle").animate({height:"0",opacity:"hide"},{duration:300});});
                    $('.gall5').hover(function(){ $(".gall5 .galltitle").animate({opacity: "0.8", height: "103", width: "209", background:"#000"},{duration:500}); }, function(){ $(".galltitle").animate({height:"0",opacity:"hide"},{duration:300});});
                    $('.gall6').hover(function(){ $(".gall6 .galltitle").animate({opacity: "0.8", height: "103", width: "209", background:"#000"},{duration:500}); }, function(){ $(".galltitle").animate({height:"0",opacity:"hide"},{duration:300});});
                }); 

Kun je vervangen door

JavaScript:

$('div.gall1, div.gall2, div.gall3, div.gall4, div.gall5, div.gall6').hover(function(){
        $(this).find('div.galltitle').animate({
            opacity: 0.8, 
            height: 103, 
            width: 209, 
            background:"#000"
        },{duration:500});
    }, function(){ 
        $("div.galltitle").animate({
            height: 0,
            opacity: "hide"
        },{duration:300});
    });

Je hoeft dit niet voor iedere regel uit te schrijven. Makkelijker zou dus ook zijn om niet elk element zn eigen class te geven (want dan moet je ze alsnog weer allemaal opgeven). Heb het ook even netjes ge-indent voor je, anders kan ik er echt geen kaas van maken.

Daarnaast zou ik je aan willen raden zoveel mogelijk tagnames toe te voegen aan je selectors. jQuery kan veel sneller een div.class vinden dan een algemene .class.