2010-10-08 7 views
1

Donc, je vois ce qui se passe. J'ai une image positionnée, agrandie à partir du centre, puis elle se déplace vers le positionnement original qui lui est donné par le CSS.Utilisation de l'effet. ("Échelle"): maintien de l'image en place et ne pas la déplacer

Ce que je pensais pouvoir faire est de le mettre à l'échelle puis de le positionner en conséquence via .css pour éviter une secousse ... afin que l'objet se développe en place.

Pas d'occurrence. Chaque fois que j'essaie ou que je vois un objet à l'échelle du centre, il revient à la position x/y d'origine avant l'échelle.

Ce que je voudrais, c'est de mettre à l'échelle une image de son centre vers le haut ou vers le bas et de la faire rester là où elle finit après la mise à l'échelle.

Voici le code simple je jusqu'à présent:

$("#cs_house").effect("scale", {percent:120}, 250); 
$("#cs_house").fadeTo(10,1); 
$("#cs_house").css({'top':28+'px','left':10+'px'}); 

donc ce bout échelles une image avec un identifiant de cs_house puis se fane en arrière. La dernière ligne est ce que j'ai utilisé pour le garder en place, mais il recourt à la mise à l'échelle en haut à gauche. ?

+0

Quel est l'attribut 'position' pour l'image et le conteneur dans lequel il se trouve? – Xion

+0

la détention est relative et l'article est absolu. Je viens de lire que "Origin: ['middle', 'center']" est seulement pour show() et hide() donc cela explique quelque chose. Cependant, je travaille sur le remplacement de src attr avec un gif animé en deux étapes. OU, simulant le fondu à 100% pour utiliser le show et je me rapproche. Doit être une meilleure façon cependant! – Billy

Répondre

1

Premièrement: Je voudrais recommander de positionner le support absolu et lui donner une largeur correspondant à la largeur-cible (largeur de l'image * 1.2). En outre, réglez l'alignement du texte du support sur "center" et la marge de l'image sur "auto".

De cette façon, l'image est toujours centrée dans le support. Plus important: n'utilisez pas effect() Le même effet peut être fait avec animate(), il suffit d'appeler animate avec {width: imagewidth * 1.2}. animate() semble faire l'effet "nettoyeur" sans aucun crétin, car il ne fera rien de plus que vous ne voulez (mettre à l'échelle l'image).

effet() fait plus, il joue avec la position et injecte des objets aide nécessaire

see example

0

Dr.Molle ... c'est proche, mais l'échelle arrive du centre haut plutôt que le centre du milieu .... au moins dans FireFox sur Windows. Cela m'a donné quelque chose à penser, alors merci!