CODEWITHSUNDEEP
javascripthtml
user6334194
user6334194

Reputation:

Javascript innerHTML animation

I have a Countdown in Javascript and HTML. Its working through innerHTML and I want a animation when changing the values from innerHTML.

Countdown is working perfectly!

Javascript:

var jahr=2016, monat=5, tag=15, stunde=11, minute=2, sekunde=00; var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde); function countdown() {
startDatum=new Date(); // Aktuelles Datum

if(startDatum<zielDatum)  {
    var jahre=0, monate=0, tage=0, stunden=0, minuten=0, sekunden=0;

      while(startDatum<zielDatum) {
        jahre++;
        startDatum.setFullYear(startDatum.getFullYear()+1);
      }
      startDatum.setFullYear(startDatum.getFullYear()-1);
      jahre--;

      while(startDatum<zielDatum) {
        monate++;
        startDatum.setMonth(startDatum.getMonth()+1);
      }
      startDatum.setMonth(startDatum.getMonth()-1);
      monate--;

      while(startDatum.getTime()+(24*60*60*1000)<zielDatum) {
        tage++;
        startDatum.setTime(startDatum.getTime()+(24*60*60*1000));
      }

      stunden=Math.floor((zielDatum-startDatum)/(60*60*1000));
      startDatum.setTime(startDatum.getTime()+stunden*60*60*1000);

      minuten=Math.floor((zielDatum-startDatum)/(60*1000));
      startDatum.setTime(startDatum.getTime()+minuten*60*1000);

      sekunden=Math.floor((zielDatum-startDatum)/1000);

      (jahre!=1)?jahre=jahre+"":jahre=jahre+"";
      (monate!=1)?monate=monate+"":monate=monate+"";
      (tage!=1)?tage=tage+"":tage=tage+"";
      (stunden!=1)?stunden=stunden+"":stunden=stunden+"";
      (minuten!=1)?minuten=minuten+"":minuten=minuten+"";
      if(sekunden<10) sekunden="0"+sekunden;
      (sekunden!=1)?sekunden=sekunden+"":sekunden=sekunden+"";

      document.getElementById('days').innerHTML = ""+tage+""; 
      document.getElementById('hours').innerHTML = ""+stunden+""; 
      document.getElementById('minutes').innerHTML = ""+minuten+""; 
      document.getElementById('seconds').innerHTML = ""+sekunden+""; 

    if(tage==1){
        dayText = "Tag";
    } else {
        dayText = "Tage";
    }

    if(stunden==1){
        hoursText = "Stunde";
    } else {
        hoursText = "Stunden";
    }

    if(minuten==1){
        minutesText = "Minute";
    } else {
        minutesText = "Minuten";
    }

    if(sekunden==1){
        secondsText = "Sekunde";
    } else {
        secondsText = "Sekunden";
    }

    document.getElementById('daysText').innerHTML = ""+dayText+""; 
    document.getElementById('hoursText').innerHTML = ""+hoursText+""; 
    document.getElementById('minutesText').innerHTML = ""+minutesText+""; 
    document.getElementById('secondsText').innerHTML = ""+secondsText+""; 

      setTimeout('countdown()',200);
    } else {


    } 
}

HTML: 

<div class="time days">
                    <div id="days" class="value">00</div>
                    <div id="daysText" class="unit">Days</div>
                </div>
                <div class="time hours">
                    <div id="hours" class="value">00</div>
                    <div id="hoursText" class="unit">Hours</div>
                </div>
                <div class="time minutes">
                    <div id="minutes" class="value">00</div>
                    <div id="minutesText" class="unit">Minutes</div>
                </div>
                <div class="time seconds">
                    <div id="seconds" class="value">00</div>
                    <div id="secondsText" class="unit">Seconds</div>
                </div>

And how can I do for example a fadeInDown animation?

Thanks!

Upvotes: 2

Views: 2645

Answers (2)

Berry M.
Berry M.

Reputation: 489

The easiest way to do this would probably be JQuery, found at JQuery.com. I also found a similar question here: jquery animation on div innerhtml on change

As for your code, you'll want something like:

$('#daysText').fadeOut(1000, function()
{     
    $(this).html(dayText).fadeIn(1000);
});

$('#hoursText').fadeOut(1000, function()
{     
    $(this).html(hoursText).fadeIn(1000);
});
$('#minutesText').fadeOut(1000, function()
{     
    $(this).html(minutesText).fadeIn(1000);
});

$('#secondsText').fadeOut(1000, function()
{     
    $(this).html(secondsText).fadeIn(1000);
});

Note that this will only work with JQuery installed. Instructions to this can be found at http://jquery.com/download/

Short version of said instructions: Add the following code to your HTML (Commonly done near the bottom of the document) to include the JQuery library

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Upvotes: 2

Sebastien Daniel
Sebastien Daniel

Reputation: 4778

You can't animate a text-node directly. You'll have to animate a wrapping element, which will have dynamically set style values. Something like:
<span style="opacity:0;">your content</span>

Also, changing innerHTML is a complete replacement of existing elements, it will "break" any ongoing animations inside the parent element.

Upvotes: 1

Related Questions