Fonction fadeout

PORTOS -  
 PORTOS -
Bonjour tous le monde,

je suis un debutant en JQUERY, et je n'arrive pas a faire un truc qu'on ma dit de faire, au faite je possede un texte ce texte doit disparaitre en defilant, il me semble que c'est la fonction FadeOut() en jquery mais le probleme c'est que je sais pas ou le placez pouvez vous m'aidez??? je vous remerci. voila mon code:


JQUERY



var banner = {
speed:750, timeoutdelay: 100,
padding: 0, elements: new Array(), selector: '#words-banner2'
};

banner.getPadding = function () {
// Animate items
banner.elements = $(banner.selector).children();
var totalWidth = 0;
banner.elements.each(function () {
totalWidth += parseInt($(this).outerWidth());
});
banner.padding = (900 - totalWidth) / (banner.elements.size() + 1);
}

banner.handle = function (init) {
banner.getPadding();
var currentLeft = banner.padding;
banner.elements.each(function (index) {
if (init) {
$(this).css('left', currentLeft).css('opacity', (1 - (index / parseInt(banner.elements.size()))));

/*} else if (index == 0) {
$(this).animate({'opacity': 0}, banner.speed, function () {
newElement = $('<div>' + $(this).html() + '</div>');
$(this).remove();
newElement.css('opacity', 0);
newElement.appendTo($(banner.selector));
newElement.css('fontSize', '22px').css('left', (900 - banner.padding - parseInt(newElement.outerWidth())) + 'px');
newElement.animate({'opacity': 1}, banner.speed);
});*/

} else {
$(this).animate({'left': currentLeft, 'fontSize': '+=6px', 'opacity': (1 - (index / parseInt(banner.elements.size())))}, banner.speed, function () {
// Strip the ' / ' chars
//$(this).children('span').hide();
});
//console.log($(this).html() + ': opacity=' + (index / parseInt(banner.elements.size())));
}
if (index == 0) {
// Add 'first-word' CSS class to the first element
$(this).addClass('first-word');
// Strip the ' / ' chars
//$(this).children('span').hide();
//$(this).html($(this).html().substr(2));
}
currentLeft += $(this).outerWidth() + banner.padding;
});
// Set run timeout
if (!init) {
window.setTimeout('banner.start()', banner.timeoutdelay);
}
}

banner.startAnimation = function() {
// Init items
banner.handle(true);
// Set start timeout
window.setTimeout('banner.start()', banner.timeoutdelay)
}

banner.start = function () {
//console.log('start');
$(banner.selector + ' div.first-word').animate({'opacity': 0}, banner.speed, function () {
newElement = $('<div>' + $(this).html() + '</div>');
$(this).remove();
newElement.css('opacity', 0);
newElement.appendTo($(banner.selector));
newElement.css('fontSize', '15px').css('left', (900 - banner.padding - parseInt(newElement.outerWidth())) + 'px');
newElement.addClass('word5');
// add " / " chars to the new element
//newElement.html(' / ' + newElement.html());
// Animate other elements
banner.handle();
});
}


HTML


<div id="words-banner">
{*<a href="{$BASE}/index.php" title="{#global_site_name#}" id="logo">
<img src="{$BASE}/images/logo.png" width="880" height="82" alt="{#global_site_name#}" /></a>*}

<div id="words-banner2">
<div class="word1 first-word" style="left:0px">Construction</div>
<div class="word2" style="left:262px">Rénovation</div>
<div class="word3" style="left:492px">Location</div>
<div class="word4" style="left:668px">Achat</div>
<div class="word5" style="left:788px">Vente</div>
</div>
</div>

CSS


#header, #navMain, #main { width: 880px; margin: 0 auto; }
#header { padding-top: 6px;}
#header-top { width: 900px; margin: 0 auto; /*height: 110px;*/ font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}
#header-top h1 { margin: 0; padding: 0; height: 82px; font-size: 46px; color: #FFF; border: none; text-align: center; font-weight: normal; }
/*.word1{ font-size: 46px; }
.word2{ font-size: 40px; color: #CFCFCF; }
.word3{ font-size: 34px; color: #9F9F9F; }
.word4{ font-size: 28px; color: #636363; }
.word5{ font-size: 22px; color: #3B3B3B; }*/
.word1{ font-size: 46px; }
.word2{ font-size: 40px; }
.word3{ font-size: 34px; }
.word4{ font-size: 28px; }
.word5{ font-size: 22px; }

#words-banner2 { color: #FFF;margin: 0;position:relative;overflow:hidden;height:82px;}
#words-banner2 div {position:absolute;bottom:10px;}
A voir également:

2 réponses

PORTOS
 
En clair si vous avez pas compris je veux que quand le texte avance il disparait petit a petit
0
PORTOS
 
personne pour me repondre????
0