Comment animer le texte avec les styles css font-weight propriété en jQuery ? normaux à gras

Je suis en train d'animation comme l'opacité de l'effet, qui tourne texte audacieux lentement. Essayé d'habitude animate() méthode, mais n'a pas fonctionné. Cherché mais coundn pas à trouver un exemple. Est-il possible de faire cela?

jsFiddle.

jQuery:

var Text = $('h1');
Text.click(function() {
    Text.animate({'font-weight':'bold'},600)
        .delay(200).animate({'font-weight':'normal'},600);
});
InformationsquelleAutor Barlas Apaydin | 2012-09-15
  1. 14

    Malheureusement je pense que c'est impossible.

    Chaque caractère dans une police de caractères a une forme spécifique. En outre, les caractères similaires dans les différents poids poids sont également distinctes de caractères gras ne sont pas tout simplement mathématiquement définie par décalage de son examen régulier de la contrepartie.

    Il serait très facile de sauter de l'ordinaire pour gras ou italique avec jQuery.css(), mais il est actuellement impossible de jQuery.animate() de la transition de la police de poids dans le navigateur. Il est difficile de faire dans l'animation en tant que bien, parce qu'il n'existe pas de “frames” entre les différents poids, car ils sont tous dessinés séparément.

    Cependant,

    Si vous choisissez une police qui a une sorte de l'espacement des lettres pour le poids différents—comme Exo—et faire un traceur d'animation à partir de minces noir vous pouvez venir proche du résultat souhaité.

    À partir de votre jsFiddle c'est ce que je pouvais trouver:

    Voici de travail jsFiddle.

    Et plutôt stupide Javascript derrière elle:

    Text.click(function() {

  Text.css({'font-weight':200});
  setTimeout(function(){ Text.css({'font-weight':300})}, 30)
  setTimeout(function(){ Text.css({'font-weight':400})}, 60)
  setTimeout(function(){ Text.css({'font-weight':500})}, 90)
  setTimeout(function(){ Text.css({'font-weight':600})},120)
  setTimeout(function(){ Text.css({'font-weight':700})},150)
  setTimeout(function(){ Text.css({'font-weight':800})},180)
  setTimeout(function(){ Text.css({'font-weight':900})},210)

});
    • Merci! J'ai été à la recherche des réponses sur ce depuis longtemps, pensé qu'il était temps j'ai essayé d'aider les gens à sortir avec le peu de choses que je connais. Quant à ma réponse, l'inconvénient majeur est que vous avez besoin d'une police de caractères avec beaucoup de poids, ce qui est difficile à trouver dans les polices de caractères gratuites. Aussi, j'ai été très limitée dans le nombre de liens que je pouvais poster à cause de ma réputation de 1 🙂
    InformationsquelleAutor MXDVL
  2. 4

    Vous pouvez utiliser pur CSS, en utilisant text-shadow et la pseudo classe :hover, avec un transition pour animer il

    CSS:

    .animate {
  font-size: 35px;
  transition: 0.6s;
}
.animate:hover {
  text-shadow: 0 0 2px black;
  transition: 0.6s;
}

    HTML:

    <div class="animate">StackOverflow</div>

    Vous pouvez également utiliser jQuery, en utilisant addClass():

    JS:

    $("#animateBold").click(function() {
  $(".animate").addClass("bold");
});

    CSS:

    .animate {
  font-size: 30px;
}
/* Then .bold CSS class */
.bold {
  text-shadow: 0 0 2px black;
  transition: 0.6s;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animate">StackOverflow<div>
<button id="animateBold">Animate!</button>

    Ou, si vous vouliez une bascule effet, à l'aide d'un complexe opérateur:

    ($(".animate").hasClass("bold")) ? $(".animate").removeClass("bold") : $(".animate").addClass("bold");

    JS:

    $("#toggleBold").click(function() {
  ($(".animate").hasClass("bold")) ? $(".animate").removeClass("bold") : $(".animate").addClass("bold");
});

    CSS:

    .animate {
  font-size: 30px;
  transition: 0.6s;
}
.bold {
  text-shadow: 0 0 2px black, 0 0 2px black;
  transition: 0.6s;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animate">StackOverflow<div>
<button id="toggleBold">Animate!</button>

    • Je pensais que c'était un effet amusant à utiliser après une action a été effectuée, j'ai ajouté un 2e classe de la fermeture de l'effet.
    InformationsquelleAutor joe_young
  3. -2

    Techniquement font-weight peut être un nombre, comme 100 ou 800, mais
    pratiquement parlant des navigateurs n'implémentent soit normal ou gras.
    Animer prend soit un nombre ou une de "cacher", "show", ou "bascule".
    Donc votre "gras" ne fonctionne pas.
    En théorie, vous pourriez définir la police-poids à un numéro, puis de passer dans un
    nombre d'animer. (400 est de poids "normal", 700 est en gras [1])
    Hélas, ce ne semble pas fonctionner dans jQuery.

    MAIS! Vous POUVEZ faire cela avec CSS3, même si il l'habitude de travailler sur Internet explorer, votre effet désiré s'élèvera à plus de 50% de la population. Voir pour un exemple.

    http://www.quackit.com/css/css3/properties/css_transition-property.cfm

    • Cela ne fonctionne pas, si vous changez votre vol stationnaire propriétés à juste .resize:hover { font-weight:bold; } vous verrez qu'il n'est pas animé, il passe juste entre gras et normal.
    • Bizarre que cela semble comme si elle animés en gras, je n'ai pas le tester, j'ai quitté le test pour vous, désolé que cette option ne fonctionne pas!
    • Merci, même si il a été souligné que ce n'était pas animée, il a travaillé pour la fin j'en avais besoin, donc merci @Shannon.
    InformationsquelleAutor Shannon