Java-Scripts.net

Fading Content Transition

Eliminate jarring page jumps. This script allows you to swap text or images with a gentle fade effect, greatly improving the perceived quality of your user interface.

Section One

This is the initial content. Click the button to fade to the next section.

Copy the Script

<style>
#box {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
.hidden { opacity: 0 !important; }
</style>

<script>
function changeText() {
    var el = document.getElementById("box");
    // 1. Fade Out
    el.classList.add("hidden");
    
    // 2. Wait for fade, swap text, Fade In
    setTimeout(function() {
        el.innerHTML = "<h3>New Content</h3>";
        el.classList.remove("hidden");
    }, 500); // Matches CSS duration
}
</script>

Frequently Asked Questions

CSS transitions are hardware accelerated by the browser's GPU, making them much smoother and less battery-intensive than using JavaScript loops to animate opacity.

Yes. Adjust the `transition-duration` property in the CSS (e.g., change `0.5s` to `1s` for a slower fade).

No. As long as the content is present in the HTML (even if hidden initially), search engines can generally crawl it. However, keeping critical content visible is always best.