Experimenting with incorporating easing effects into jQuery tabs

Could someone please help me implement an easing/fading effect on tabs using jQuery? I am looking to add an easing effect to my current code and also incorporate two CSS classes to change the background color along with the text color. Thank you for any assistance.

Jquery:

$(document).ready(function() {

        var origColor = $("#links-top-contact a").css("color");

        $("#links-top-contact a").hover(function() {

            $(this).css({color:'blue'});

        },function() {

            $(this).css({color:origColor});

        });

    })

; CSS

#links-top-contact a{
    color:#fff;
    font-size:30px;
    text-decoration:none;
    border:1px solid blue;
    padding:-5px 10px 10px 10px;
    margin-top:20px;
    margin-left:20px;
    border-radius:25px;
    -moz-border-radius:25px;
    -webkit-border-radius:25px;
    -khtml-border-radius:25px;
    background-color:red;
    }

HTML:

<br/><div id="links-top-contact"><a href="#">yo</a></div>

This is the jsFiddle.

javascriptjqueryhtmlcss

Answer №1

If you're looking to add some color effects to your website, have you considered using the jquery color plugin? You can check out an example of how it works here.

I've made some updates to your jsFiddle so that you can see the plugin in action.

Incorporating this into your code would look something like this:

var origColor = $("#links-top-contact a").css("background-color");

$("#links-top-contact a").hover(function() {
    $(this).animate({
        backgroundColor: 'blue'
    }, 500);
}, function() {
    $(this).animate({
        backgroundColor: origColor
    }, 500)
});

Answer №3

You have the ability to change the background-color if you wish.

$(this).css({color:'blue',backgroundColor:'green'});

To simplify things, consider using CSS :hover pseudoselector to adjust text/background color without having to use jQuery.

If you're interested in adding easing or fading effects, check out jQuery's animate and fadeIn fadeOut methods: jQuery Effects

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

What are the steps to set up Redis Store in my production environment?

I am currently in the process of setting up Redis as a session store, but for some reason it's not functioning properly. I have integrated passport.js and express-flash, however when I attempt to run the current Redis setup, it fails to work: var ses ...

javascriptnode.jsexpressredis

Can you please provide guidance on how to restrict a text field to accept only alphabets during an "OnClick" event? I would appreciate any corrections on the script I am currently using

Hello, I am trying to utilize this code specifically for alphabet characters only. Unfortunately, the code is not functioning as expected and I am in need of your assistance to correct it. I have been unable to pinpoint the error causing the issue. Any hel ...

javascriptjquery

Tips for excluding the mention of the final index within a for loop when passing the index as a parameter for a function

I'm struggling with the code I've written: function(customSlider, images){ // create thumbs container var thumbContainer = $("<div></div>").addClass(defaultOptions.thumbsContainerClass); // add thumbs ...

javascriptjquery

Implement a sliding effect for the navigation menu

I'm trying to figure out how to make this menu slide in when the hamburger menu is clicked. The background of the menu is an SVG, not just a shape. Does anyone have any suggestions or ideas on how I can achieve this effect? For reference, here is the ...

javascripthtmlcss

Getting the value of a dropdown list every time it's updated using jQuery

Is it possible to change the image displayed in a select list each time the user makes a selection? Here is my current code: HTML <div id="branches"> <h3>British Columbia Old Age Pensioners' Organization &mdash; Branches</h3&g ...

javascriptjqueryhtml

Guide to incorporating d.ts file for enhancing intellisense in VS Code using a method akin to the NPM approach

In my nodejs project (in JS), I find myself relying heavily on node global variables. Despite receiving warnings against using globals, everything works well except for one thing: The lack of intellisense for globals. Every time I need to use a global fu ...

javascriptnode.jstypescriptvisual-studio-code

Leverage the power of Bootstrap 5 to showcase multiple form input-groups side by

Is there a way to showcase multiple form input groups side by side using Bootstrap 5? I attempted the following, but the input group components ended up stacking on top of each other: <div class="container"> Your username is <div class= ...

cssbootstrap-5

Stopping a Javascript function from running when an asp.net webform is loaded

Here is the code I wrote to display my position on the map: <script src="http://maps.googleapis.com/maps/api/js"></script> <script> function initialize(x, y) { alert(x); alert(y); var mapProp ...

javascriptjqueryasp.net

Express.JS failing to save data to file when using NeDB

Currently, I am developing a bulk import feature for my personal password manager and I have encountered a problem. The issue arises when trying to import an array of passwords using the forEach() method to iterate through each one. After calling the inse ...

javascriptnode.jsexpress

Convert HTML Form to PDF or Docx with Angular 4

My current setup involves Angular 4 with Node and MySQL. I have a form that, upon submission, needs to trigger a Save As... dialog box for the user to save the entered form contents as either a PDF or Word Doc. I've attempted using htmlDox and saveAs ...

jquerynode.jsangular

Issue with processing JQUERY getJSON/ajax response

I've encountered an issue while sending a json request to a server. Here is the code snippet: $.getJSON("prod_search.php?type=getCustInfo&custID="+custID, function(json) { alert(json.address); $("#invAddress").html(json.address); $("#curren ...

phpjavascriptajaxjson

I am looking to download a file from a server and showcase it in a browser using React.js. The file will be received as a response from the

**I am looking to retrieve a file from the server by sending the file name through the body and then receiving the requested file from the server.** I have successfully received the file in response from the server, which I tested using Postman. What I a ...

javascriptnode.jsreactjsexpresspostman

Is it possible to showcase two modals on a single page, positioning one to the left and the other to the right using Bootstrap?

Can someone help me learn how to display two modals on the same screen, one on the left and one on the right? I am new to bootstrap and would appreciate some guidance! ...

javascripthtmlcsstwitter-bootstrap

JQuery UI button causing an error in Internet Explorer related to "potentially harmful Request.Form value"

While testing my application with Internet Explorer, I discovered that buttons styled with JQuery UI button are sending their entire content to the server. This causes a "A potentially dangerous Request.Form value was detected from the client" error in ASP ...

jqueryasp.net-mvcasp.net-mvc-2

Transform your standard HTML form code into a condensed single-line embed code

I've devoted countless hours to finding a resolution for this issue. It's most likely simple, but alas, I haven't found it yet. My current project involves creating my own HTML forms using HTML and CSS, along with a touch of JavaScript. In ...

html

Personalized Firefox Scrollbar - Rounded Corners

I have successfully customized the default CSS of browser scrollbars for Chrome and Edge, but I am facing issues with Firefox. Is there a way to sync the scrollbar styling in Firefox with Chrome and Edge? Currently, I am unable to apply border radius to th ...

htmlcssangularfirefoxscrollbar

Dynamic line breaks within an unordered list

I have a requirement where I need to display the last two li elements from an ul list on a new line if the screen width is less than 625px. The code snippet below achieves this functionality: ... ... ... ... However, this code fails valida ...

htmlcsshtml-lists

Is it normal for ASP.NET Control to return null with JavaScript getElementById?

When I am using JavaScript, I encounter the following error during execution: Microsoft JScript runtime error: 'document.getElementById(...)' is null or not an object This is the code I am working with: <asp:Content ID="content2" ContentPla ...

javascriptasp.netwebformsgetelementbyid

Trouble with selecting items on the list

I'm currently working on implementing a list that allows users to select elements. I've managed to select items, but the issue is that the "active" class isn't being removed from previously selected ones. If I click on all of them, they all ...

htmlangulartwitter-bootstrap

"Converting a standard grammar with recursion and alternations into a regular expression: A step-by-step

A grammar is considered regular if it follows either a right-linear or left-linear pattern. According to this tutorial, this type of grammar possesses a unique property: Regular grammars have a special characteristic: through the substitution of every no ...

javascriptecmascript-nextcompiler-construction