IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Désactiver un listener pendant une animation


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Septembre 2003
    Messages
    108
    Détails du profil
    Informations forums :
    Inscription : Septembre 2003
    Messages : 108
    Par défaut Désactiver un listener pendant une animation


    Je m'amuse un peu avec jQuery depuis hier et j'ai eu envie de faire une petite fonction pour zoomer une image au survol de la souris. Ca marche pas mal, mais il y a un petit problème : j'utilise un booléen pour savoir si mon image est zoomée ou non, si je quitte la zone de hover de l'image puis revient rapidement dessus avant la fin de l'animation, le script considère que l'image n'est pas zoomée alors qu'elle y est, du coup on peut étendre l'image à fond juste en bougeant la souris. Et inversement. Pas top ! Je cherche donc un truc du type stopObserving que je placerais en début d'animation ou une propriété genre "busy" applicable à l'image.

    D'autre part, j'utilise comme flag la valeur padding de l'image (la première propriété qui n'est venue à l'esprit...). C'est pas génial mais je ne sais pas quoi utiliser d'autre. Y'a t-il une propriété CSS qui pourrait remplir ce rôle ou une autre façon de faire ?

    Je précise que j'ai découvert jQuery hier et que je trouve ce truc génial, donc désolé si mes questions sont nazes

    Voici le code :

    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
    var growth = 200;
     
    $(".maClasse").mouseenter(function(e) {
    	zoomImage(this);
    }).mouseleave(function(e) {		
    	zoomImage(this);
    });
     
    function zoomImage(img) {
    	var currentWidth, currentHeight, finalWidth, finalHeight, centerTop, centerLeft;
    	var topPos = $(img).css("top");
    	var leftPos = $(img).css("left");
    	var isBig = $(img).css("padding")=="1px";
     
    	currentWidth = $(img).width();
    	currentHeight = $(img).height();
    	centerLeft = parseInt(leftPos + currentWidth/2);
    	centerTop = parseInt(topPos + currentHeight/2);
     
    	if (isBig) {
    		finalWidth = parseInt(currentWidth/(growth/100));
    		finalHeight = parseInt(currentHeight/(growth/100));
    		topPos = centerTop + parseInt(finalHeight/2) + "px";
    		leftPos = centerLeft + parseInt(finalWidth/2) + "px";
    		$(img).css({"padding": "0px"})
    	} else {
    		finalWidth = parseInt(currentWidth*(growth/100));
    		finalHeight = parseInt(currentHeight*(growth/100));
    		topPos = centerTop - parseInt(currentHeight/2) + "px";
    		leftPos = centerLeft - parseInt(currentWidth/2) + "px";
    		$(img).css({"padding": "1px"})
    	}
     
    	$(img).animate({
    		top: topPos,
    		left: leftPos,
    		width: finalWidth + "px"
    		}, 700 );
    }
    Merci de votre aide !

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir.

    J'ai hésité longuement entre conserver votre code en utilisant des boutons au lieu de mouseenter et mouseleave (quasi impossible à maîtriser pour cet usage, surtout avec plusieurs images) et prendre sur mon temps pour vous donner un exemple fonctionnel.

    Pour un premier script jQuery c'est bien, mais pour l'animation vous étiez parti sur de mauvaises bases.

    Pour apprendre, je vous conseille de triturer et de modifier les paramètres de l'exemple et je vous donne un exercice dans les commentaires du code.

    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
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    <!doctype html>
    <html lang="fr">
    <head>
    	<meta charset="utf-8">
    	<meta name="Author" content="Daniel Hagnoul">
    	<meta name="description" content="Page type">
    	<title>Page type</title>
    	<style>
    		body {
    			background-color:#dcdcdc;
    			color:#000000;
    			font-family:sans-serif;
    			font-size:medium;
    			font-style:normal;
    			font-weight:normal;
    			line-height:normal;
    			letter-spacing:normal;
    		}
    		h1,h2,h3,h4,h5 {
    			font-family:serif;
    		}
    		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
    			margin:0px;
    			padding:0px;
    		}
    		p {
    			padding:6px;
    		}
    		ul,ol,dl {
    			list-style:none;
    			padding-left:6px;
    			padding-top:6px;
    		}
    		li {
    			padding-bottom:6px;
    		}
    	</style>
    	<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
     	<script>
    		$(function(){
    			/*
    			 * inverse la visibilité des boutons ZoomIn et ZoomOut
    			 */
    			function ZoomOK(){
    				if ($("#btnZoomIn").css("visibility") == "visible"){
    					$("#btnZoomIn").css("visibility","hidden");
    					$("#btnZoomOut").css("visibility","hidden");
    				} else {
    					$("#btnZoomIn").css("visibility","visible");
    					$("#btnZoomOut").css("visibility","visible");
    				}
    			}
     
    			/*
    			 * zoomImage(boolZoom, pourcent, limite, millisecondes)
    			 * 
    			 * Si boolZoom est true on agrandit width et height de poucent
    			 * si la limite en pixels n'est pas dépassée.
    			 * 
    			 * Si boolZoom est false on diminue width et height de poucent
    			 * si la limite en pixels n'est pas dépassée.
    			 *
    			 * L'animation dure millisecondes.
    			 *
    			 * Comme on travaille avec une limite, après une série de ZoomIn et
    			 * de ZoomOut la taille relative des images en sort complétement modifiée.
    			 *
    			 * Si on n'impose pas de limite, un ZoomOut peut faire disparaître l'image
    			 * et le ZoomIn suivant donne une image à sa taille par défaut.
    			 * Pour tester cet effet, mettre la limite à 0 dans btnZoomOut
    			 *
    			 * Exercice : utiliser un effet easing différent de l'effet par défaut (linear).
    			 * plug-in Easing : http://gsgd.co.uk/sandbox/jquery/easing/
    			*/
     
    			$("#btnZoomIn").click(function() {
    				ZoomOK();
    				zoomImage(true, 20, 800, 4000); // +20% de la taille précédente, limiter à 800px, 4s
    				return false; // stop l'action par défaut et la propagation de l'événement
    			})
     
    			$("#btnZoomOut").click(function() {
    				ZoomOK();
    				zoomImage(false, 20, 200, 4000); // -20% de la taille précédente, limiter à 200px, 4s
    				return false; // stop l'action par défaut et la propagation de l'événement
    			});
     
    			function zoomImage(boolZoom, pourcent, limite, millisecondes) {
    				var obj = $("img.superZoom");
    				var n = obj.length - 1;
     
    				/*
    				 * on sélectionne toutes les images ayant la class
    				 * superZoom mais on traite chaque image séparément
    				*/ 
    				obj.each(function(i, item){
    					/*
    					 * i est le numéro de l'image
    					 * item est l'image
    					*/
     
    					// si boolZoom est true et que la limite de taille n'est pas dépassée
    					if (boolZoom){
    						if (($(item).width() < limite) && ($(item).height() < limite)){
    						$(item).animate({
    							width: "+=" + pourcent + "%",
    							height: "+=" + pourcent + "%"
    						}, millisecondes, function(){
    							// lorsque l'animation de la dernière image est terminée
    							if (i == n){
    								ZoomOK();
    							}
    						});
    						} else {
    							/*
    							 * une image est hors limite
    							 * diminuer de 1 le nb d'images
    							 * si c'était la dernière image...
    							*/
    							n -= 1;
     
    							if (i == n){
    								ZoomOK();
    							}
    						}
    					} else {
    						// pour boolZoom false
    						if (($(item).width() > limite) && ($(item).height() > limite)){
    							$(item).animate({
    								width: "-=" + pourcent + "%",
    								height: "-=" + pourcent + "%"
    							}, millisecondes, function(){
    								// lorsque l'animation de la dernière image est terminée
    								if (i == n){
    									ZoomOK();
    								}
    							});						
    						} else {
    							/*
    							 * une image est hors limite
    							 * diminuer de 1 le nb d'images
    							 * si c'était la dernière image...
    							*/
    							n -= 1;
     
    							if (i == n){
    								ZoomOK();
    							}
    						}
    					}
    				});
    			}
    		});
    	</script>
    </head>
    <body>
    	<div>
    		<button id="btnZoomIn">ZoomIn</button> <button id="btnZoomOut">ZoomOut</button>
    	</div>
    	<div>
    		<p>
    			<img class="superZoom" style="width:480px; height:250px;" src="../images/imageTest.png"/>
    		</p>
    		<p>
    			<img class="superZoom" style="width:280px; height:150px;" src="../images/imageTest.png"/>
    		</p>
    	</div>
    </body>  
    </html>
    [Edit 2010-04-07 0900]
    J'ai oublié de vous donner l'exercice numéro deux.
    J'ai volontairement choisi de cacher les boutons à l'ancienne, en passant la propriété CSS visibility de visible à hidden.
    L'action est brutale.
    Simplifiez mon code en utilisant un effet jQuery.
    Temporisez l'effet pour qu'il dure plus ou moins le temps d'un zoom.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

Discussions similaires

  1. [WD-2007] Désactiver la sauvegarde pendant une macro Word
    Par pbeecham dans le forum VBA Word
    Réponses: 1
    Dernier message: 30/07/2013, 19h55
  2. desactiver des bouton pendant une animation
    Par haydens dans le forum Flash
    Réponses: 3
    Dernier message: 03/08/2008, 02h05
  3. Réponses: 3
    Dernier message: 25/09/2007, 06h47
  4. Réponses: 1
    Dernier message: 17/02/2006, 19h18

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo