Continuously update the content within a paragraph using jQuery

Question

Continuously update the content within a paragraph using jQuery

After searching for a jQuery animation that would constantly change text within a paragraph, I stumbled upon a solution at this link : Text changing with animation jquery. However, I encountered a challenge as I wanted to include a bootstrap button beneath the paragraph. The issue arises when the button starts moving up and down while the opacity is null.

var words = ["text1", "text2", "text3","text4","text5"];
var idx = 0;

$("#description").fadeOut("slow");

setInterval(function(){
    $("#description").stop().html(words[idx]).fadeIn("slow",function(){
        idx++;
        $("#description").delay(400).fadeOut("slow");
        if (idx == 5) {
            idx = 0;
        };
    });
},1800);

<p id="description"></p>
 <p>Hello world</p>

You can experience the issue on a fiddle here: https://jsfiddle.net/km19e3jf/2/

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

When using the fadeOut and fadeIn functions, the display property of the element is changed from block to hide, causing #description to completely lose its height upon calling fadeOut.

A different approach that doesn't require additional updates outside of the existing code can be implemented:

var content  = [ "content1", "content2", "content3", "content4", "content5" ];
var current = 0;

$("#description").fadeTo( 1, 0 );

setInterval( function(){
    $( "#description" ).stop().html( content[ current ] ).fadeTo( 500, 1, function(){
        current++;
        $( "#description" ).delay( 400 ).fadeTo( 500, 0 );
        if ( current == 5 ) {
            current = 0;
        };
    } );
}, 1800 );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
     <p id="description">text 1</p>
</div>

To avoid changing the display property and instead alter the opacity, consider using fadeTo in your script:

View the working example on this fiddle here.

Answer 2

When using the fadeOut and fadeIn functions, the display property of the element is changed from block to hide, causing #description to completely lose its height upon calling fadeOut.

A different approach that doesn't require additional updates outside of the existing code can be implemented:

var content  = [ "content1", "content2", "content3", "content4", "content5" ];
var current = 0;

$("#description").fadeTo( 1, 0 );

setInterval( function(){
    $( "#description" ).stop().html( content[ current ] ).fadeTo( 500, 1, function(){
        current++;
        $( "#description" ).delay( 400 ).fadeTo( 500, 0 );
        if ( current == 5 ) {
            current = 0;
        };
    } );
}, 1800 );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
     <p id="description">text 1</p>
</div>

To avoid changing the display property and instead alter the opacity, consider using fadeTo in your script:

View the working example on this fiddle here.

Answer 3

Answer №2

To create a fixed height around your text, consider adding a container.

Using the fadeOut and fadeIn functions will toggle the display of elements between block and hidden (hide).

This movement affects the elements below it.

var text = ["text1", "text2", "text3","text4","text5"];
var index = 0;

$("#description").fadeOut("slow");

setInterval(function(){
    $("#description").stop().html(text[index]).fadeIn("slow",function(){
    index++;
        $("#description").delay(400).fadeOut("slow");
    if (index == 5) {
        index = 0;
    };
    });
},1800);

.container{
  height:25px;
}

#description{
  margin:0;
  padding:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p id="description"></p>
</div>

<p>Hello world</p>

Answer 4

To create a fixed height around your text, consider adding a container.

Using the fadeOut and fadeIn functions will toggle the display of elements between block and hidden (hide).

This movement affects the elements below it.

var text = ["text1", "text2", "text3","text4","text5"];
var index = 0;

$("#description").fadeOut("slow");

setInterval(function(){
    $("#description").stop().html(text[index]).fadeIn("slow",function(){
    index++;
        $("#description").delay(400).fadeOut("slow");
    if (index == 5) {
        index = 0;
    };
    });
},1800);

.container{
  height:25px;
}

#description{
  margin:0;
  padding:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p id="description"></p>
</div>

<p>Hello world</p>

Answer 5

Answer №3

When applying the fadeOut function, it sets the element to display none after the animation, causing a noticeable jump. Instead of using fadeOut, opt for .css to adjust the opacity smoothly.

Try this code:

$("#description").delay(400).css({'opacity': 0});

To animate the transition, include transition-duration: 400ms; in your CSS for #description.

Answer 6

When applying the fadeOut function, it sets the element to display none after the animation, causing a noticeable jump. Instead of using fadeOut, opt for .css to adjust the opacity smoothly.

Try this code:

$("#description").delay(400).css({'opacity': 0});

To animate the transition, include transition-duration: 400ms; in your CSS for #description.

Continuously update the content within a paragraph using jQuery

Answer №1

Answer №2

Answer №3

Similar questions

Is using debounce with $scope.$apply a logical choice?

Using Javascript, when the command key is pressed, open the link in a new window

What is the best method for establishing a page location during rendering/onload?

Ways to improve the quality of a blurred photo

Transforming a string into JSON format for the purpose of implementing JSON Patch

React: I am looking to incorporate two API calls within a single function

Image failing to appear in .php document

unable to submit form using angular and express

How to troubleshoot syntax errors when using the delete function in Three.js within Eclipse

How can I align a sub-submenu horizontally using CSS?

transferring data from the interface to the processor

Building a dynamic form in React: Fetching select data from an API, posting to another API, and automatically clearing fields upon submission

Error: The function registerUser from require(...) is not defined

Retrieving HTML code as a variable using Python

Issues with the directory for Chrome

Next.js - utilizing dynamic API routes within nested folders

Using the Mongoose $or operator with a nested array in query conditions

I'm looking for a way to display the value stored in a variable within an ejs template. Any suggestions

Utilizing the principles of object orientation in Javascript to enhance event management

Customizing a toggle checkbox in Bootstrap 5: A guide to personalization