Discussion :

[stefde3]

Bonjour cher amis codeurs

voilà, je viens de mettre un effet bounce pour une info-bulle. je n'ai aucun soucis sous chrome par contre l'effet bounce est très exagéré sous mozilla firefox...

voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<script type="text/javascript">
    setInterval(function()  {
        $(".bulle").effect( "bounce",
        {times:10}, "3000" );
    },2000 );
</script>

avez-vous déjà eu ce soucis aussi de votre côté ?

existe t-il une solution ou le problème vient de mon code ?

sous chrome la bulle rebondie trois fois rapidement (times:10) puis s'arrête et recommence à nouveau. la hauteur du bounce est très petite (ce que je veux en fait)

mais sous mozilla, le bounce ne s'arrête jamais et il sort de mon bouton exagérément que se soit vers le haut ou vers le bas.

voilà j'attends vos commentaires et aides si possible

[sekaijin]

merci de poster les question JQuery dans le forum JQuery

la fonction "efect" prend en paramètre un nom d'effet et un objet (clefs/valeurs)
tu a précisé le nombre de rebonds
tu peux aussi préciser les paramètres "distance" "mode" et "direction"

http://api.jqueryui.com/effect/
http://api.jqueryui.com/bounce-effect/

A+JYT

[stefde3]

Désolé j'ai pas trouvé la partie jquery :S

ok merci pour les infos, en revanche on peut lui attribuer plusieurs valeurs ? du style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<script>
    setInterval(function()  {
        $(".bulle").effect( "bounce", "slow", 
        {times:4},{distance:5}, "3000" );
    },2500);
</script>

[sekaijin]

Je dirais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<script>
    setInterval(function()  {
        $(".bulle").effect( "bounce", "slow", 
        {times:4, distance:5}, "3000" );
    },2500);
</script>

[stefde3]

ça na change rien malheureusement... l'effet sous firefox est toujours éxagéré...

Ah bah ça fait pareil sous IE... y a que chrome qui le prend bien... curieux.

je mets le css et le html au cas ou :

html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<div class="bt_mail">
    <a href="#" title="Ma messagerie">
        <span class="bulle">1</span>
        <img src="img/blank.gif" width="55" height="31" alt="blank.gif">
    </a>
</div>

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.bt_mail {
	position:relative;
}
 
.bt_mail .bulle {
	position:absolute;
	bottom:3px;
	right:3px;
	background:#ff9600;
	width:15px;
	height:15px;
	border-radius:30px;
	display:block;
	line-height:15px;
	text-align:center;
}

[stefde3]

Ah bon en fait non c'est résolu car j'avais oublié que j'avais essayé de le faire en CSS3 juste avant et avais pas retiré ces lignes de codes ^^

donc fonctionnel merci beaucoup pour ces réponses rapides