Home/ Questions/Q 3627374
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T23:52:49+00:00

I am trying to do fadein/out effect when I change innerHTML of a div.

  • 0

I am trying to do fadein/out effect when I change innerHTML of a div. Even tried example given at safari doc

I want the div to fade-out, change the contents and then fade-in again with new content.

<style>
.cv { background-color: #eee; -webkit-transition: all 1s ease-in-out;}
.cf {opacity: 0;}
</style>
<body> 
 <div id="main"> 
  <div id="c"> OLD </div>
 </div> 
</body>
<script> 
var c = document.getElementById("c");
c.setAttribute("class", "cf");
c.innerHTML = '';
c.appendChild(fragment);
c.setAttribute("class", "cv");
</script>

Please help me here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is what I finally ended doing. Thank you all for the answers

    init: function(fragment) {
        var c = document.getElementById("c");
        c.addEventListener( 'webkitTransitionEnd', IDR.callHook(c, fragment), false);
        c.setAttribute("class", "cv hide"); 
     },

     callHook: function(c, fragment) {
        var fp = function() {
           c.removeEventListener('webkitTransitionEnd', fp, false);
           c.innerHTML = '';
           c.setAttribute("class", "cv");
           c.appendChild(fragment);
        };
        return fp;
     },
    • 0