Text color animation effect for menu

Question

Text color animation effect for menu

Here is the layout of my menu:

<nav>
    <a href="#">
        <span class="black">Home</span>
        <span class="red active">Home</span>
    </a>
    <a href="#">
        <span class="black">Longer menu item</span>
        <span class="red">Longer menu item</span>
    </a>
    <a href="#;">
        <span class="black">Two words</span>
        <span class="red">Two words</span>
    </a>
    <a href="#">
        <span class="black">About</span>
        <span class="red">About</span>
    </a>
    <a href="#">
        <span class="black">Contact</span>
        <span class="red">Contact</span>
    </a>
</nav>

The active menu item is styled in red. When a user clicks on a link, the red color should transition smoothly from the active menu item to the clicked link, changing the color as it moves along.

Experience the effect in action with this fiddle. Click on the second link, then the third link to see the transition.

While the transition from left to right works perfectly, the initial red text moves along with the color instead of staying fixed. How can I fix this?

I am open to any suggestions on enhancing this effect.

Edit:
To clarify, I am looking to achieve this effect on text rather than hover. When you move the mouse from left to right on the first row, you'll see the desired effect. I want this effect to occur on click, not just hover.

There are two scenarios to consider:

When a menu item is clicked on the right side of the active link -> the color effect should transition to the right.
When a menu item is clicked on the left side of the active link -> the color effect should transition left.

javascript jquery html css

Answer 1

Answer №1

Maybe you intended to reference this: http://jsfiddle.net/t1w4gy0w/3/

Updated for both variations: http://jsfiddle.net/t1w4gy0w/4/

Enhanced for quicker user interaction: http://jsfiddle.net/t1w4gy0w/5/

$('.blackholder').parent().on('click', function(event) {

    if ($(this)[0] === $('.red.active').parent()[0]) {
        return;
    }

    var animFull = function (obj) {
        obj.addClass('top').finish()
        .css('width', '0').animate({ width: '100%'}, {
            duration: 1000,
            queue: false,
            complete: function () {
                $(this).removeClass('top');
            }
        });
    };

    var moveRight = function (atag) {
        animFull(
            $('.red.active').removeClass('active').siblings('.black')
        );

        animFull(
            $(atag).children('.red').addClass('active')
        );
    };

    var animZero = function (obj) {
        obj.addClass('top').finish()
        .animate({ width: '0'}, {
            duration: 1000, queue: false,
            complete: function () {
                $(this).removeClass('top').css('width', '100%'); 
            }
        });
    };

    var moveLeft = function (atag) {
        animZero(
            $('.red.active').removeClass('active')
        );

        $(atag).children('.red').addClass('active');
        animZero(
            $(atag).children('.black')
        );
    };

    if ($('.red.active').parent().position().left < $(this).position().left) {
        moveRight(this);
    } else {
        moveLeft(this);
    }

});

.blackholder {
    color: #000;
}
.black.top, .red.top {
    z-index: 3;
}
.black {
    z-index: 1;
    color: #000;
    left: 0;
    position: absolute;
}
.red {
    color: red;
    left: 0;
    position: absolute;
}
.red.active {
    z-index: 2;
}

<nav>
    <a href="javascript:void(0);">
        <span class="blackholder">Home</span>
        <span class="black">Home</span>
        <span class="red active">Home</span>
    </a>
    <a href="javascript:void(0);">
        <span class="blackholder">Longer menu item</span>
        <span class="black">Longer menu item</span>
        <span class="red">Longer menu item</span>
    </a>
    <a href="javascript:void(0);">
        <span class="blackholder">Two words</span>
        <span class="black">Two words</span>
        <span class="red">Two words</span>
    </a>
    <a href="javascript:void(0);">
        <span class="blackholder">About</span>
        <span class="black">About</span>
        <span class="red">About</span>
    </a>
    <a href="javascript:void(0);">
        <span class="blackholder">Contact</span>
        <span class="black">Contact</span>
        <span class="red">Contact</span>
    </a>
</nav>

If modifications are needed, such as adding comments to the code, please let me know in the comments section.

Answer 2

Maybe you intended to reference this: http://jsfiddle.net/t1w4gy0w/3/

Updated for both variations: http://jsfiddle.net/t1w4gy0w/4/

Enhanced for quicker user interaction: http://jsfiddle.net/t1w4gy0w/5/

$('.blackholder').parent().on('click', function(event) {

    if ($(this)[0] === $('.red.active').parent()[0]) {
        return;
    }

    var animFull = function (obj) {
        obj.addClass('top').finish()
        .css('width', '0').animate({ width: '100%'}, {
            duration: 1000,
            queue: false,
            complete: function () {
                $(this).removeClass('top');
            }
        });
    };

    var moveRight = function (atag) {
        animFull(
            $('.red.active').removeClass('active').siblings('.black')
        );

        animFull(
            $(atag).children('.red').addClass('active')
        );
    };

    var animZero = function (obj) {
        obj.addClass('top').finish()
        .animate({ width: '0'}, {
            duration: 1000, queue: false,
            complete: function () {
                $(this).removeClass('top').css('width', '100%'); 
            }
        });
    };

    var moveLeft = function (atag) {
        animZero(
            $('.red.active').removeClass('active')
        );

        $(atag).children('.red').addClass('active');
        animZero(
            $(atag).children('.black')
        );
    };

    if ($('.red.active').parent().position().left < $(this).position().left) {
        moveRight(this);
    } else {
        moveLeft(this);
    }

});

.blackholder {
    color: #000;
}
.black.top, .red.top {
    z-index: 3;
}
.black {
    z-index: 1;
    color: #000;
    left: 0;
    position: absolute;
}
.red {
    color: red;
    left: 0;
    position: absolute;
}
.red.active {
    z-index: 2;
}

<nav>
    <a href="javascript:void(0);">
        <span class="blackholder">Home</span>
        <span class="black">Home</span>
        <span class="red active">Home</span>
    </a>
    <a href="javascript:void(0);">
        <span class="blackholder">Longer menu item</span>
        <span class="black">Longer menu item</span>
        <span class="red">Longer menu item</span>
    </a>
    <a href="javascript:void(0);">
        <span class="blackholder">Two words</span>
        <span class="black">Two words</span>
        <span class="red">Two words</span>
    </a>
    <a href="javascript:void(0);">
        <span class="blackholder">About</span>
        <span class="black">About</span>
        <span class="red">About</span>
    </a>
    <a href="javascript:void(0);">
        <span class="blackholder">Contact</span>
        <span class="black">Contact</span>
        <span class="red">Contact</span>
    </a>
</nav>

If modifications are needed, such as adding comments to the code, please let me know in the comments section.

Answer 3

Answer №2

Are you searching for a transition effect from red to black and vice versa? Check out this demo link: http://jsfiddle.net/t1w4gy0w/2/

$('.black').on('click', function (event) {
    $('.red').animate({
        width: 0
    }, {
        duration: 1000,
        queue: false
    }).removeClass('active');
    $(this).parent().find('.red').addClass('active').animate({
        width: '100%'
    }, {
        duration: 1000,
        queue: false
    });
});

Don't forget to update the CSS as well.

.red {
    top: 0;
    right: auto;
    left: 0;
    width: 0;
    color: red;
    display: none;
    position: absolute;
    z-index: 5;
    overflow: hidden;
}
.red.active {
    left: 0;
    right: auto;
    display: block;
    width: 100%;
}

Answer 4

Are you searching for a transition effect from red to black and vice versa? Check out this demo link: http://jsfiddle.net/t1w4gy0w/2/

$('.black').on('click', function (event) {
    $('.red').animate({
        width: 0
    }, {
        duration: 1000,
        queue: false
    }).removeClass('active');
    $(this).parent().find('.red').addClass('active').animate({
        width: '100%'
    }, {
        duration: 1000,
        queue: false
    });
});

Don't forget to update the CSS as well.

.red {
    top: 0;
    right: auto;
    left: 0;
    width: 0;
    color: red;
    display: none;
    position: absolute;
    z-index: 5;
    overflow: hidden;
}
.red.active {
    left: 0;
    right: auto;
    display: block;
    width: 100%;
}

Answer 5

Answer №3

Perhaps

$('.black').on('click', function(event) {
    $('.red').css({'width': 0}).removeClass('active');
    $(this).siblings('.red').addClass('active').animate({ width: '100%'}, {
        duration: 1000,
        queue: false
    });
});

If you're aiming for a color slide to the left, adjust the position of .red to the left. Currently, it seems like width = 0 is moving towards the right corner.

Answer 6

Perhaps

$('.black').on('click', function(event) {
    $('.red').css({'width': 0}).removeClass('active');
    $(this).siblings('.red').addClass('active').animate({ width: '100%'}, {
        duration: 1000,
        queue: false
    });
});

If you're aiming for a color slide to the left, adjust the position of .red to the left. Currently, it seems like width = 0 is moving towards the right corner.

Text color animation effect for menu

Answer №1

Answer №2

Answer №3

Similar questions

The functionality of JQuery is not effective when trying to retrieve a radio button value within a partial view

Run JavaScript code to retrieve the console log using Selenium WebDriver or WatiN

What are the steps for implementing CSS in Markdown?

I ran into an issue trying to modify the color and thickness of the divider line in MaterialUI

A group of iframes are cropping at the bottom

What's causing my struggle to override the bootstrap nav-link class in next.js?

I'm having trouble with my fullscreen menu. Is there something I missed when setting it up?

Improving JavaScript Functions: Minimize duplication of helper methods

Is there a more efficient method for implementing React OnChange for each field?

Using a variety of different font styles within a single sentence

Ajax fails to send requests to PHP after changing the URL directory

Issue encountered: Unable to locate module: Error - Unable to resolve '@cycle/run' with webpack version 2.2.1

Having trouble generating a mock constructor for the user model

Storing the result of an Angular $http.get request in a variable

Get rid of the "clear field" X button for IE11 on Windows 8

What is the best way to use JQuery to delete dynamically generated div elements after removing a record from the database?

When running collection.find().toArray(callback) in node.js with mongodb, the result is coming back

Dynamic dropdown menu based on the location using JSON and jQuery

Using the .json method in Angular 7 for handling responses

Is it possible to consolidate React and React-DOM into a unified library instead of having them separate?