Fonction fadeout
PORTOS
-
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;}
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:
- Fonction fadeout
- Fonction si et - Guide
- Fonction miroir - Guide
- Fonction moyenne excel - Guide
- Fonction remplacer sur word - Guide
- Fonction somme excel - Guide