Tips for returning the slider to its default position when a tab is deselected

A fantastic code snippet can be found at this link for creating an animated navigation bar. The only thing left on my wishlist is for the slider to reset to its original position if a tab is not selected. Currently, it remains static regardless of selection.

HTML

<div id="slider"></div>
<div id="red" class="item"></div>
<div id="blue" class="item"></div>
<div id="yellow" class="item"></div>
<div id="green" class="item"></div>

CSS

div {
    display: inline-block;
    float:left;
}

#red {
    background-color:#FF0000;
    height:100px;
    width:100px;
}

#blue {
    background-color:#0000FF;
    height:100px;
    width:200px;
}

#yellow {
    background-color:#E2BE22;
    height:100px;
    width:50px;
}

#green {
    background-color:#008800;
    height:100px;
    width:170px;
}
#slider{
    background-color:#6FF;
    height:10px;
    width:100px;
    position: absolute;
    left: 0;
    top: 0;
}

SCRIPT

$(document).ready(function(){
      $("#slider").animate({
          "left": $(".item:first").position().left + "px",
          "width": $(".item:first").width() + "px"
        }, 0);

    $(".item").hover(function(){
       $("#slider").stop(); $("#slider").animate({"left":$(this).position().left+"px","width":$(this).width()+"px"},500);
    });
});

Attempted Solution

$("#slider").delay(3000).animate({
    "left": $(this).position().left + "px",
    "width": $(this).width() + "px"
}, 500);

Answer №1

Have you attempted to accomplish a task similar to this example?

 $(".element").on("mouseout", function(){
       $("#carousel").stop(); 
       $("#carousel").animate({"left": $('#blue').position().left + "px", "width": $('#blue').width() + "px"}, 500);
    });

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

Detecting button clicks in different views using Backbone.js

In my current setup, I have a main parent view called View.A which is responsible for managing two child views - View.B and View.C. Specifically, View.B contains buttons that trigger events on that view. Configuration View.A View.B view.B.template. ...

What's the deal with that negative index value?

This is the JavaScript code I am currently working with: let number = $(".linksMiniImages a").index(this); alert(number); Whenever I click on a link, the alert displays -1. I'm struggling to figure out what might be causing this issue. Any ideas? ...

Ways to showcase additional content

When I receive a JSON Object containing posts from a WordPress account, it only includes about 15 posts. What steps can I take to retrieve more than that amount? The structure of the JSON data is as follows: { ID: 4164, title: "24 Hour Non-Stop with Ma ...

Trigger a page refresh when you revisit it

Currently, I am utilizing Nuxt in SPA mode and my page structure is set up like this: pages ... - users/ - - index - - new - - update/ - - - _id ... I have a page dedicated to displaying a list of users along with a 'subpage' for adding new u ...

Display the information stored in an array onto the console using console.log in Angular with Typescript

.html file <div class="container" *ngFor="let info of (this.info || [])"> <h5 class="card-title" (click)="getInfo()">{{info.paragraph1}}</h5> </div> .ts file getInfo () { *****console.lo ...

When using the test() method in JavaScript with regular expressions, it may return true even if not all characters match, even when using

When attempting input validation in a textarea, I encountered the following issue: const re= /^[0-9A-Za-zÀ-ÿ\s\’\'\:\.\-\,\!\[\]\(\)\@\&\?]+?$/im; re.test(control.valu ...

Tailored alignment of checkboxes and labels

I've designed a custom checkbox where the actual checkbox is hidden and a label is styled to look like a checkbox. Everything works fine, however, when I add a label, it doesn't align properly. Here's the link to the fiddle: http://jsfiddle ...

What could be the reason for Sequelize's findAll() method returning only a single object?

I am currently facing an issue where I can only retrieve one record out of many similar records when searching for products by brand and model name using Sequelize. This problem occurs even if there are multiple matching records, with the additional ones h ...

Encountering silence: React JS fetch call left unanswered by Sinatra server

Exploring the realms of Sinatra and React JS, I am venturing into making a GET call from my React website to a Sinatra server in order to display plain text. The Sinatra Server script: require 'sinatra' set :root, 'lib/app' before d ...

Sinon and Chai combination for testing multiple nested functions

I attempted to load multiple external JavaScript files using JavaScript. I had a separate code for the injection logic. When I loaded one JavaScript file, the test case worked fine. However, when I tried to load multiple JavaScript files, the test case FA ...

When using percentages in HTML, the height and width of a background picture may not scale correctly

Currently, I am utilizing Webstorm software purely for HTML and CSS without any additional plugins. In my code, there is a <section> element that only has the <html> and tags as its parent elements. This particular section is assigned an ID th ...

Typescript throws an error indicating that the "this" object in Vue methods may be undefined, displaying error code TS2532

As a beginner in question writing, I apologize if my wording is not clear. The issue at hand: I am working on a Vue application with TypeScript. export default { methods: { setProgram: (program: Program)=>{ this.program = progra ...

Determine whether certain radio buttons are selected using jQuery

JavaScript $('input').change(function() { $('input:radio').prop('disabled', true); $('.answer-detail').show(); $(this).next('label').addClass('correct'); var correctAnswers = ("#answer ...

What is the process for converting a string into a date while disregarding the time zone

Due to the way dates are stored, it is important for me to retrieve them exactly as they are stored, but time zones are causing issues. moment("2020-10-28T08:41:00.000Z").format("YYYY-MM-DD HH:mm") // Result: 2020-10-28 09:41 However, ...

Revamp the style of the date field in a Material UI dialog

I'm currently working on a React project where I am using Material-UI's date picker component to display date items. However, I find that the default style does not meet my requirements. I would like to use a selector for displaying dates in the ...

Using PHP's modulus operator, you can dynamically apply CSS classes to a grid of images based on alternating patterns

Exploring the use of modulus to dynamically apply a CSS class to images displayed in a grid under different scenarios: Situation 1 In this situation, the goal is to target and apply a CSS class to middle images marked with *. Since the number of images ...

What methods are available for transferring information between nodejs and puppeteer?

Recently, I developed a nodejs application that kicks off from index.js. Within index.js, puppeteer is launched and bot.js is injected into a headless-api page using the addScriptTag function. In my implementation, index.js sets a cookie to pass initial v ...

Increasing the size of the center image by using CSS elements placed along the circumference

Is there a way to enlarge the center image by 1.25 times compared to the outer images? You can view the code on this codepen. For a simplified explanation of the code, check out this link. I have attempted to adjust the circle size but it ends up affectin ...

Utilizing jQuery to create a recursive AJAX poll with setTimeout to regulate the polling frequency

$(document).ready(function() { (function pollUsers() { setTimeout(function() { $.ajax({ url: "/project1/api/getAllUsers", type: "GET", success: function(userData) { ...

What's the best way to fill checkboxes in EJS when editing a route?

As a beginner, I am working on my first project - a simple content/property listings app. I have created a form to collect user data and display it on a show form. The form includes sections for checkboxes and radio buttons, with the values being stored i ...