Animate-changing Wörter Breite

Ich habe einen Satz, wo ich fade-in einem Wort und ersetzen Sie es mit einem anderen aus einem array. Jedoch, da die Worte alle variieren in der Länge, der Satz Breite abrupt ändert und es führt zu einem abgehackten übergang.

Wie kann ich das animieren der Breite ändern? Ich habe versucht, das hinzufügen eines übergangs zu dem container des Satzes in der css, aber das hat nicht funktioniert. Ich wandte den übergang so 1.5s all linear, so sollte es sein, das animieren der Breite, wie alles andere auch, wenn es eine Veränderung. Irgendwelche Ideen?

JS:

$(function() {
  var hello = ['dynamic', 'a', 'aklsjdlfajklsdlkf', 'asdf'];
  var used = ['dynamic'];
  var greeting = $('#what');
  var item;

  function hey() {

    item = hello[Math.floor(Math.random() * hello.length)];
    if (hello.length != used.length) {
      while (jQuery.inArray(item, used) != -1) {
        item = hello[Math.floor(Math.random() * hello.length)];
      }
      used.push(item);
    } else {
      used.length = 0;
      item = hello[Math.floor(Math.random() * hello.length)];
      used.push(item);
    }
    greeting.html(item);
    greeting.animate({
      "opacity": "1"
    }, 1500);
  }

  window.setInterval(function() {
    greeting.animate({
      "opacity": "0"
    }, 1500);
    setTimeout(hey, 1500)
  }, 5000);

});

CSS:

#sentence {
  transition: 1.5s all linear;
}

#what {
  font-style: italic;
  text-decoration: underline;
  color: red;
}

HTML:

<p id="sentence">
  This is a sentence that has <span id="what">dynamic</span> text that alters width.
</p>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

EDIT: Sorry, wenn ich unklar war, ich möchte nur das "fade-out" das Wort, nicht der ganze Satz. Ich versuche zu animieren, die Breite zu passen, das neue Wort. Ich will nicht zu ändern Sie/fügen Sie alle Elemente, einfach zu lösen mit den aktuellen tags im Ort.

  • Css-Animationen nicht animieren, nicht deklarierten Wert... Wie auto width auto-Breite... Nur wenn es auf genauen Wert... Wie, wenn Sie hatte 100 und und ändern Sie diesen Wert, es wird Veränderungen animieren
  • So kann man es machen. Legen Sie die Breite der vorhandenen word-Skript. Dann, bevor Sie es ändern Messen Sie die neuen word-Breite (es gibt viele verschiedene Möglichkeiten dafür) und legen Sie es mit der Deckkraft...
InformationsquelleAutor Josue Espinosa | 2013-12-20
  1. 29

    Animate-changing Wörter Breite

    JS:

    function dataWord () {

  $("[data-words]").attr("data-words", function(i, d){
    var $self  = $(this),
        $words = d.split("|"),
        tot    = $words.length,
        c      = 0; 

    //CREATE SPANS INSIDE SPAN
    for(var i=0; i<tot; i++) $self.append($('<span/>',{text:$words[i]}));

    //COLLECT WORDS AND HIDE
    $words = $self.find("span").hide();

    //ANIMATE AND LOOP
    (function loop(){
      $self.animate({ width: $words.eq( c ).width() });
      $words.stop().fadeOut().eq(c).fadeIn().delay(1000).show(0, loop);
      c = ++c % tot;
    }());
    
  });

}

//dataWord(); //If you don't use external fonts use this on DOM ready; otherwise use:
$(window).on("load", dataWord);

    CSS:

    p{text-align: center;font-family: 'Open Sans Condensed', sans-serif;font-size: 2em;}

/* WORDS SWAP */
[data-words]{
  vertical-align: top;
  position: static;
}
[data-words] > span{
  position: absolute;
  color: chocolate;
}

    HTML:

    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  We provide
  <span data-words="code|solutions|design"></span>
  for your business.
</p>

<p>
  You ordered
  <span data-words="1|3|28"></span>
  <b>big</b>
  <span data-words="salad|macs|chips"></span>
</p>

    • Dies funktioniert auch, was ist mit den extra $'s aber? Ist das jQuery? Ich habe nie gesehen, dass Variablen mit einem $ vor dem Namen, was ist der Zweck?
    • das ist ein gemeinsamer Weg, den wir verwenden, um anzugeben, dass diese variable ist eine Referenz auf ein HTMLElement-Objekts. Macht code leichter zu Lesen. immagine haben Sie var width = $('#width'), und als irgendwo in der Linie 200, die Sie Lesen width man könnte denken, es ist eine Zahl. Erleichtert, weiter zu Lesen in dem code eine variable wie $width - Kristall-klar, es geht um ein element. 🙂
    • Die demo erscheint, gebrochen zu werden In Chrome 33.
    • interessant, ein Problem aufgetreten ist, nur die erste Zeit, die ich verfolgt habe meine demo-link. Nicht zu jeder anderen Zeit. Jeder Weg, den ich modifiziert habe der Aufruf der callback-innen .show... sollte helfen.
    • Ich muss zugeben, ich wusste nicht, versuchen Sie einen anderen browser, oder aktualisieren Sie die Seite, wenn es nicht funktioniert. So oder so, es sieht aus wie es ' s funktioniert jetzt. Danke!
    • was, wenn wir Sie animieren wollen 2 Wörter zur gleichen Zeit?
    • sorry, habe ich Total verpasst, Ihr Kommentar! Bearbeitet meine Antwort, damit er auf weitere Worte, die-sets!
    • danke. Great job ;).
    • Mit aktuellen aktuellen Browsern (Chrome 57, Opera 44, Edge 38, Firefox 50), es sieht aus wie, dass die Breite des ersten Wortes kommt, die im ersten Durchlauf der animation ist falsch, schauen Sie sich bitte diese screenshot
    • ja, das extra-Raum war eigentlich die Breite sans-serif Standard-schriftart, als wenn Sie eine benutzerdefinierte schriftart geladen wurde (und vom browser zwischengespeichert) und dann die Berechnung richtig war, für alle anderen Iterationen. Siehe mein edit für ein Update. (und vielen Dank für bemerken!)

    InformationsquelleAutor Roko C. Buljan
  2. 2

    Wenn Sie neues Wort für Ihren Satz, den Sie sparen können, #was die Breite und dann eine animation mit dieser Breite zu. Wie diese:

    //declare as global variable and update when you set new word
var width = greeting.css('width'); 
//animation
greeting.animate({
            "opacity": "0", "width": width
        }, 1500, function(){
        });
    InformationsquelleAutor Ringo
  3. 0

    , Dies auszuprobieren:- http://jsfiddle.net/adiioo7/c8fFU/13/

    Aktualisieren können Sie die Satz-Effekt je nach Ihrer Anforderung. Derzeit ist es mit fadein/fadeout.

    JS:-

    $(function () {
    var hello = ['jupiter', 'a', 'aklsjdlfajklsdlkf', 'asdf'];
    var used = ['jupiter'];
    var greeting = $('#what');
    var item;
    var sentence = $('#sentence');

    function hey() {
        item = hello[Math.floor(Math.random() * hello.length)];
        if (hello.length != used.length) {
            while (jQuery.inArray(item, used) != -1) {
                item = hello[Math.floor(Math.random() * hello.length)];
            }
            used.push(item);
        } else {
            used.length = 0;
            item = hello[Math.floor(Math.random() * hello.length)];
            used.push(item);
        }
        greeting.html(item);
        greeting.animate({
            "opacity": "1"
        }, 1500);

        sentence.fadeIn(1500);
    }

    window.setInterval(function () {
        sentence.fadeOut(1500);
        greeting.animate({
            "opacity": "0"
        }, 1500);
        setTimeout(hey, 1500);
    }, 5000);

});
    InformationsquelleAutor Aditya Singh
  4. 0

    Habe ich das gleiche problem hatte, und ging mit einem anderen Ansatz, nicht verblassen, aber die Eingabe von: jsfiddle demo

    function type($el, text, position) {
    if (text.length >= position) {
        var rchars = 'qbvol'; //typo chars
        if (position % 3 == 0 && Math.random() > .85) { //insert typo!
            var typo;
            var chr = text.substr(position, 1);
            if (chr == chr.toUpperCase()) { typo = chr.toLowerCase(); }
            else { typo = rchars.substr(Math.floor(Math.random() * rchars.length), 1); }
            $el.text(text.substring(0, position - 1) + typo + '_');
            setTimeout(function() { type($el, text, position - 1); }, 200)
        }
        else {
            $el.text(text.substring(0, position) + '_');
            setTimeout(function() { type($el, text, position + 1); }, 150)
        }
    }
    else {
        setTimeout(function() { $el.text(text); }, 400)
    }
}

    Es im Grunde fügt den neuen text auf der Seite, mit einem schönen caret-und Tippfehler zu machen-und es Aussehen wie jemand zu schreiben.

    • Dies wäre wohl besser geeignet, um eine Schreibmaschine die Frage wie stackoverflow.com/questions/13325008/... 🙂
    • du hast Recht, aber es ist auch eine schöne animation für das ändern von text in einem Satz, aber vielleicht sollte es etwas schneller laufen, ohne Tippfehler und caret
    InformationsquelleAutor Willem
Schreibe einen Kommentar