Effet bounce exagéré sous firefox

**stefde3** · 14/09/2014, 14h41

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** · 14/09/2014, 15h15

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** · 14/09/2014, 15h21

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** · 15/09/2014, 07h57

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** · 15/09/2014, 12h42

ç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** · 15/09/2014, 16h29

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

**stefde3** · 07/10/2014, 17h06

je me permets de réouvrir ce sujet car j'ai un soucis.

concernant l'effet bounce car j'ai une erreur qui s'affiche dans la console de Chrome :

Uncaught TypeError: undefined is not a function (index):624(anonymous function)

c'est exactement le code donné plus haut.

J'avoue aussi que j'ai ajouter pas mal de fonctions en plus en jQuery et JS et je me demande si y a un ordre précis pour les énumérer...

Voici les codes générés dans mon head :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<head>
	<meta charset="UTF-8">
	<title>Terre-noire ::: Bêta 1</title>
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
	<link href="css/styleform.css"rel="stylesheet" type="text/css" media="all" />
	<link href="css/shinyform.css" rel="stylesheet" type="text/css" media="all" />
	<!-- Files JS -->
	<script src="//code.jquery.com/jquery-1.10.2.js"></script>	
	<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>
 
	<script type="text/javascript" src="js/jquery.shinyform.js" ></script>
	<script type="text/javascript">
	$(function(){
		$('input:radio,input:checkbox,input:file,select').shinyform();
	});
 
	function show() {
		document.getElementById('innerBTC').style.display = 'block';
	}
 
	function hide() {
		document.getElementById('innerBTC').style.display = 'none';
	}
 
	function calculateDacres()	{
		var rate = document.getElementById("rate").innerHTML;
		var howMuch = document.getElementById("howMuch");
		var user = document.getElementById("userDacres").value;
		var calculate = parseInt(rate) * parseInt(user);
 
		howMuch.innerHTML=calculate;
	}
 
	$(document).ready(function(){
		if($('button#toogleDiplomatie').click(function(){
			$('div#attaques').hide('2000');
			$('div#defense').hide('2000');
			$('div#productions').hide('2000');
			$('div#actionsMilitaires').hide('2000');
			$('div#diplomatie').slideDown('2000'); 
		})); 
		if($('button#toogleAttaques').click(function(){
			$('div#diplomatie').hide('2000');
			$('div#defense').hide('2000');
			$('div#productions').hide('2000');
			$('div#actionsMilitaires').hide('2000');
			$('div#attaques').slideDown('2000'); 
		})); 
		if($('button#toogleDefense').click(function(){
			$('div#diplomatie').hide('2000');
			$('div#attaques').hide('2000');
			$('div#productions').hide('2000');
			$('div#actionsMilitaires').hide('2000');
			$('div#defense').slideDown('2000'); 
		})); 
		if($('button#toogleProductions').click(function(){
			$('div#diplomatie').hide('2000');
			$('div#attaques').hide('2000');
			$('div#defense').hide('2000');
			$('div#actionsMilitaires').hide('2000');
			$('div#productions').slideDown('2000'); 
		})); 
		if($('button#toogleActionsMilitaires').click(function(){
			$('div#diplomatie').hide('2000');
			$('div#attaques').hide('2000');
			$('div#defense').hide('2000');
			$('div#productions').hide('2000');
			$('div#actionsMilitaires').slideDown('2000'); 
		})); 
		if($('button#close').click(function(){
			$('div#diplomatie').hide('2000');
			$('div#attaques').hide('2000');
			$('div#defense').hide('2000');
			$('div#productions').hide('2000'); 
			$('div#actionsMilitaires').hide('2000');
		})); 
	});
	</script>
 
</head>

et en fin de page avant la balise </body> :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script type="text/javascript">
 
	$( "#bt_nav" ).click(function() {
		if ($("#cadre_menu").css('margin-top') == "-79px" ) {
			$("#cadre_menu").animate({ marginTop: "0px"  }, 400 );
		}	else {
			$("#cadre_menu").animate({ marginTop: "-79px"  }, 400 );
			$("#cadreRessources").hide();
		}
	});
 
	$( ".bt_troupes" ).click(function() {
		if ($("#cadre_troupes").css('display') == "none" ) {
			$("#cadre_troupes").show(400);
			$(this).val("Cacher mes troupes");
		}	else {
			$("#cadre_troupes").hide(400);
			$(this).val("Afficher mes troupes");
		}
	});
 
	$(".bt_ressources").click(function(){
		if ($("#cadreRessources").css('display') == "none") {
			$("#cadreRessources").slideDown(400);
		} else {
			$("#cadreRessources").slideUp(400);
		}
	});
 
	$("#listeAttaque").click(function(){
		if ($("#Liste").css('display') == "none") {
			$("#Liste").slideDown(400);
			$(this).val("Cacher liste des joueurs attaquables");
		} else {
			$("#Liste").slideUp(400);
			$(this).val("Afficher liste des joueurs attaquables");
		}
	});
 
	setInterval(function()  {
        $(".bulle").effect( "bounce", "slow", 
        {times:4, distance:5}, "3000" );
    },2500);
  </script>

Merci de votre aide

**stefde3** · 08/10/2014, 02h07

Bon en fait c'est résolu.

C'était bien une question d'odre car dans mon head j'avais mis ceci :

Code :

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

1
2
3
<script src="//code.jquery.com/jquery-1.10.2.js"></script>	
	<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>

alors que ça devait être ceci :

Code :

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

1
2
3
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="js/jquery.min.js"></script>	
	<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

J'espère que ça pourra aider d'autres personnes qui ont cette difficulté

mettre tout ce qui est min.js et version 1.10.2.js (par exemple) en premier et les -ui.js en dernier

**SpaceFrog** · 13/10/2014, 09h59

Code :

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

1
2
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="js/jquery.min.js"></script>

charger deux versions de jquery

????

Effet bounce exagéré sous firefox

jQuery

Discussions similaires

Partager

Partager