JQuery: Change text by pushing down old one

I'm trying to achieve an effect with JQuery that when triggered, a new text pushes down the old one and makes the old one disappear. It's basically a fancy text replacement: New one pushes old one down, old one stops existing.

Somebody created something similar on this JSFiddle.

var slider = $("#slider");
  $("#button").on('click', function(){
  slider.slideUp(1500, function(){        
    slider.html("been changed").slideDown(1500);                        
  });
});

But that one does the opposite thing. It slides up and makes the old one disappear. Inverting the methods doesn't work. Is there perhaps another way to achieve what I'm trying to do?

Answers 1

  • Check it out.

    var slider = $("#slider");
    var slider2 = $("#slider2");
    $("#button").on('click', function(){
    slider2.html("been changed");
    slider2.slideDown(1500, function(){
         slider.css("display","none");
    });
    
    });
    #slider {
    border: 3px green solid;
    width: 200px;
    height: 200px;    
    }
    #slider2 {
    border: 3px green solid;
    width: 200px;
    height: 200px;
    display:none;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="slider2">
    </div>
    <div id="slider">
        should change
    </div>
    <button id="button">Click me!</button>

    Hope it's right with yours. :-)


Related Articles