Je travaille sur un effet texte, mais la transition n'est pas complètement à mon goût.
Je remplace un seul mot dans une ligne de texte centré, je rends l'ancien mot disparaître et le nouveau décolore, Mais le texte environnant "saute". J'ai essayé de trouver un certain temps à comprendre comment le faire glisser à son nouvel endroit en utilisant une animation en utilisant une animation sur les marges ou la largeur, mais je ne peux pas sembler le comprendre. P>
Voici un jsfiddle de Ce que j'ai maintenant maintenant http://jsfiddle.net/dek7m/3/ p> Qu'est-ce que j'essaie de réaliser est quelque chose de similaire à ce qui est vu dans le gros titre ici: https://gumroad.com/ p> et voici le code: p> html: p> CSS: p> $(function() {
var t1 = new Array("changing", "dynamic", "cool");
var i = 0;
var tid = setInterval(
function() {
$("#changingtext span").animate({'opacity': 0}, 1000, function () {
$(this).text(t1[i]);
}).animate({'opacity': 1}, 1000);
if(i < t1.length -1)
i++;
else i = 0;
}, 3000 );
});
4 Réponses :
Vous pouvez configurer une matrice d'objet pour inclure la largeur idéale pour chaque instance qui est suivante. P>
var t1 = [ ['changing', '130px'], ['dynamic', '80px'], ['cool','150px'] ],
i = 0;
var tid = setInterval( function() {
$("#changingtext span")
.animate({
'opacity': 0,
'width': t1[i][1] },
500,
function() {
$(this).text( t1[i][0] );
})
.animate({'opacity': 1}, 1000);
if(i < t1.length -1)
i++;
else
i = 0;
}, 3000 );
La largeur est manquante dans votre démo, consultez cette question,
script strong> P> $(function() {
var t1 = new Array("changing", "dynamic", "cool");
var i = 0;
var width;
var tid = setInterval(
function() {
$("#changingtext span").animate({'opacity': 0}, 1000, function () {
$(this).text(t1[i]);
width = $('#chkWidth').text(t1[i]).width();
$(this).animate({'opacity': 1, 'width': width}, 1000);
});
if(i < t1.length -1)
i++;
else i = 0;
}, 3000 );
});
Meilleure idée que mienne +1 :)
Voir une autre réponse couvrant le Même question
Bon! Pas besoin de CSS: P> seinterval code> lorsque vous faites face à .animer () code>
Une approche encore meilleure sans le premier changement d'écart / saut de
et avec des largeurs p> calculés de manière dynamique: p> i = ++i%t.length;
Nice, mais tout en développant son petit buggy.
@Shlomihasid haha ok merci, il suffit de déplacer l'animation de largeur à l'intérieur du premier rappel d'animation :) Aimez-vous cela maintenant?
désolé pour le pauvre anglais
@Shlomihasid Je l'ai eu, édité et ajouté la démo, jetez un coup d'œil!
OK Voici un exemple de travail que j'ai rapidement fait pour vous: Fiddle
Comme vous le pouvez Voir J'utilise un autre élément caché et contient la chaîne suivante pour calculer la largeur correcte - tout ce dont vous avez besoin maintenant est juste p> Le texte ne saute pas en s'épuisant que Les mots extérieurs sont flottés à gauche / droite. P> amusez-vous ... P> JQuery: H1>
<center>
<div id='outer1' align='center'>
<span style='float:left;'>This is</span>
<span id="changingtext1">changing</span>
<span style='float:right;'>text</span>
</div>
<br />
<span id='next1'></span>
</center>
La chose la plus simple à faire serait de corriger la largeur du
. Tout ce qui va au-delà de cela va être assez difficile, car le navigateur ne vous donne pas beaucoup de contrôle sur la manière dont le mécanisme de mise en page fonctionne.... et vous pourriez aussi animer la largeur de la plage; cela aidait probablement.
J'ai ajouté un lien à quelque chose de similaire que j'essaie d'atteindre, voir le gros titre ici: gommad.com