borders in motion

I am currently working with this jQuery code.

//this is the main javascript

$(document).ready(function(){

    $('nav.menu a').hover(
        function () {
            $('nav.menu').find(".current_item").removeClass("current_item");
            $(this).addClass("current_item");

        }, 
        function () {
            $(this).removeClass("current_item");
            $('nav.menu').find(".damenu").addClass("current_item")
        }
);

});

Here is the HTML structure I am using:

<nav class="menu">
    <a href="home.html" class="current_item damenu">Home</a>
    <a href="gallery.html">Gallery</a>
    <a href="home.html">Portfolio</a>
    <a href="home.html">About</a>
    <a href="home.html">Contact</a>
</nav>

This is the CSS associated with it:

.menu
{
background: 1px solid #00ffff;
width: 100%;
padding: 0px 0px 0px 10px;
}
.menu a
{
padding: 8px;
color: #0099ff;
font: bold 20px Archivo Narrow, Arial Rounded MT, Tahoma, Calibri, Asap, Arial,     Verdana, sans-serif;
text-decoration: none;
float: left;
margin-right: 8px;
text-shadow: 2px 1px 1px #ffffff;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
}
.current_item /*, .menu a:hover*/
{
color: #C5F700 !important;
border-top: 3px solid #C5F700 !important;
border-bottom: 3px solid #C5F700 !important;
}

The current behavior is that when hovering over a menu item, the "current_item" class gets added and removed accordingly. However, I am looking to add animations to these borders on mouseover or mouseout events. Additionally, I'm curious if there's a way to center the navigation menu?

I welcome any ideas, recommendations, and suggestions from anyone who can assist. Thank you in advance.

javascriptjqueryhtmlcss

Answer №1

Just wondering if it's possible to implement the following code into the .current_item section?

-webkit-transition: .5s border-color, color ease;
-moz-transition: .5s border-color, color ease;
-ms-transition: .5s border-color, color ease;
-o-transition: .5s border-color, color ease;
transition: .5s border-color, color, ease;

Answer №2

You can create animated borders using just CSS

.menu
{
background: 1px solid #00ffff;
width: 100%;
padding: 0px 0px 0px 10px;
}
.menu a
{
padding: 8px;
color: #0099ff;
font: bold 20px Archivo Narrow, Arial Rounded MT, Tahoma, Calibri, Asap, Arial,     Verdana, sans-serif;
text-decoration: none;
float: left;
margin-right: 8px;
text-shadow: 2px 1px 1px #ffffff;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
-webkit-transition: 1s all ease;
-moz-transition: 1s all ease;
-ms-transition: 1s all ease;
-o-transition: 1s all ease;
transition: 1s all ease;
}
.menu a.current_item, .menu a:hover
{
color: #C5F700 !important;
border-top: 3px solid #C5F700 ;
border-bottom: 3px solid #C5F700 ;
}

Answer №3

Download the JQuery color animation plugin and follow these steps:

 $('#currentitem').hover(function(){
        (this).animate({borderColor:'#fff'});
    }, function(){
       (this).animate({borderColor:'#000'});
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A loop that iterates through only the initial element of an array

When trying to call in the array values using the code snippet below, I encountered an issue. Upon clicking, I am able to successfully retrieve the first material in the array, but then it stops looping through the rest of the materials. Can someone plea ...

javascriptarraysthree.js

Extjs: How to Select a Node After Creating a Tree Structure

I am facing an issue with my TreePanel where I want to preselect a specific node when loading it. The nodes are fetched from a remote json file and the tree structure loads correctly. However, the selected node is not getting highlighted and Firebug is sho ...

javascriptajaxextjs

What is the most effective way to send multiple values through the <option> value attribute?

Currently, I am in the process of creating an online shopping item page. To display all the necessary information about an item (such as price, image, name, etc.), I use the 'item_id' to loop through a database containing item info. Additionall ...

javascriptphpsqlajax

Ajax is unresponsive

I'm having another go at creating some simple code: my goal is that when I change the value in the dropdown select, Ajax will be triggered and display "HELLO AJAX" in the second div tag. However, I am not receiving any response. Can anyone help me i ...

jqueryajax

Associate a click event to a dropdown menu element to trigger on selection

My issue involves having multiple select elements. When one of them is changed, I am trying to bind a click event only to its next element with the .btn class. Below is the code snippet illustrating my problem: <div class="whole"> <ul> ...

javascriptjquery

navigating a collection of objects and retrieving individual property values

I am having trouble extracting values from an array of objects, specifically only the values from the first object in each sub-array. Here is how my array of objects looks: items [ [ {id: 1, title: "title1", imgUrl: "https://someimage1"}, {id: 2 ...

javascriptreactjs

Is using the new Date function as a key prop in React a good

In my React code, I have been using new Date().getTime() as key props for some Input components. This may not be the best practice as keys should ideally be stable. However, I am curious to know why this approach is causing issues and why using Math.random ...

javascriptreactjs

Is it possible to create and view HTML files in Objective C through user interaction?

I am currently working on developing an iOS app that enables users to create an unlimited number of HTML documents and save them within the app's documents folder. It's somewhat of a combination question, but how can I showcase a file that is sto ...

htmlobjective-cios

What is the best way to extract just the hours and minutes from a timestamp column that includes hours, minutes, and seconds in my dataset and create a new column

Is there a way to extract only the hour and minute values from a timestamp column that includes seconds in my dataset? ...

javascriptpythonsqlrexcel

JQuery scroll position, floating menu bar, and animation delay

I'm in the process of creating a menu bar using JQuery, and I am a beginner with this technology. My goal is to have the menu bar delay when scrolling down, but stick immediately to the top of the browser window when scrolling up. Currently, the delay ...

javascriptjquery

Tips for Positioning Content in the Center of a Bootstrap Div

I'm struggling to center the jackpot-item-container div within a chart. Can anyone help me figure this out? Check out my code on CodePen. <div id="jackpot-container" class="col-sm-12"> <div id="jackpot-item-container"> <span id= ...

htmlcsstwitter-bootstrap

Enhancing User Experience in AngularJS UI-Router by Updating State without Refreshing the Template

I have noticed that every time I navigate to a different state, my templates and controllers are refreshing. This is not the behavior I want; I would like to retain the values entered into a form on contact.html when switching to home.html. Currently, I a ...

javascriptangularjsangular-ui-router

A pair of iterations of the same design

It may sound strange, but I find myself in a situation where I need to have two versions of the same model in my Node.js application. Let me try to explain. I am required to create two different account types, one for job seekers and one for employers. Th ...

javascriptnode.jsmongodbexpress

Asynchronous NestJs HTTP service request

Is there a way to implement Async/Await on the HttpService in NestJs? The code snippet below does not seem to be functioning as expected: async create(data) { return await this.httpService.post(url, data); } ...

javascriptnode.jstypescriptnestjs

Encountered an issue with accessing the property 'path' of undefined in nodejs

Below is my server side code snippet: var fs = require('fs'), MongoClient = require('mongodb').MongoClient, db; var url = "mongodb://localhost:27017/fullwardrobedb"; MongoClient.connect(url, {native_parser: true}, function (err, connec ...

javascriptnode.jsfilecurl

Storing dynamically loaded images through PHP, AJAX, JSON, and jQuery for faster retrieval

I will provide as much detail as I can here. The application I am currently developing allows administrators to create folders and upload photos into them. The display is similar to Pinterest, where all the photos are loaded in a collage on one screen. It ...

phpjavascriptjqueryjsoncaching

Position the text in the center of a graph within a grid cell by utilizing dash and plotly

Is there a way to center text over a graph within a cell of a grid table using dash and plotly? I'm struggling with the alignment currently, as the graph is not centered while the text appears centered in the view but not in the cell itself. You can ...

pythoncssgridplotly-dash

Attempting to populate getElementByID using JavaScript function from CodeBehind proves unsuccessful

When a button is clicked on a form, I need to fill in hidden elements that will be posted. The script below should set the values for these hidden fields: <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> < ...

javascriptasp.netformsgetelementbyid

Using (javascript:) within Href attributes

Recently, I've noticed some people including "javascript:" in the href attribute of an a tag. My question is: what is the purpose of this? Does it guarantee that clicking on the a tag directs the function of the click to JavaScript for handling, rathe ...

javascripthtml

"Make your slides smooth and responsive with the unslick option in slick

Currently implementing the Slick Slider on a WordPress website. The slider is designed to display 3 columns at a screen size of 1024px and above. When the screen size drops below 1024px, the slider adjusts to show 2 columns, and on mobile devices, it swit ...

javascriptjquerycssflexboxslick.js