Using JQuery to update text by sliding in the new one and pushing down the old text

Question

Using JQuery to update text by sliding in the new one and pushing down the old text

I am experimenting with JQuery to create a unique effect where new text pushes the old text down and causes it to vanish. Essentially, it is a stylish text replacement: the new text displaces the old text while making it disappear.

Someone has developed something similar on this JSFiddle.

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

However, the provided solution does the reverse. It slides up and makes the previous text disappear. Reversing the methods does not yield the desired result. Is there an alternative approach to accomplish what I intend to do?

javascript jquery html css

Answer 1

Answer №1

Take a look at this.

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>

I hope this aligns with your expectations. :-)

Answer 2

Take a look at this.

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>

I hope this aligns with your expectations. :-)

Using JQuery to update text by sliding in the new one and pushing down the old text

Answer №1

Similar questions

What is the best way to send a prop for inline styling in a React component that contains an array of data?

Utilizing a promise instead of making a jQuery ajax request

Steps for showcasing the data entered in the input box

Repositioning with Flexbox: shifting the middle element to a new line

Creating a hierarchical structure for the Category Model in Sequelize using self-referencing

Designing a user-friendly search form using HTML

Utilizing multiple class names in Material UI with identical definitions

Jest.config not allowing exclusion of specific files

Measuring Bootstrap's breakpoints using specific divs: A beginner's guide

Looking for assistance in determining a solution for progress bar implementation

Take away the follow option on the embedded tweet

Terminate or flag an AJAX request upon receiving a 200 OK response from the browser

Navigating and organizing with React Native: TabBarIOS and Navigation

Retrieving the value of an object based on a dynamic key in Typescript

Utilizing variable values in HTML and CSS to enhance a website's functionality

Difficulty arises with AJAX GET function within PHP FUNCTION

Utilizing Next.js routing to accommodate two distinct subdomains on a single website

Alter the texture or hue in the mesh surface

Tips for Ensuring the Longevity of my Node.js Server

What could be the reason for this script not functioning properly and...?