Execute action after changing background-position in JQuery

I am currently updating the background-position property of a div to gradually change its color from left to right. After completing the position transition, I am looking to trigger another action in JQuery to modify the fill of the #event_2 element:

<div class='event' id='event_1'></div>
<div class='connector' id='connector_1'></div>
<div class='event' id='event_2'></div>

$('#event_2').click(function(){
        $('#connector_1').css('background-position', '80px 0px');
        myPos = $('#connector_1').css("background-position").split(" ");
        if(myPos[0] == '100%'){
        $(this).css({'background': '#7b9d6f', 'border-color': '#7b9d6f'});
        }
    });

When the event is triggered, myPos returns [0%, 100%], so how can I detect when myPos[0] reaches 100%?

Please view the Fiddle at https://jsfiddle.net/sL156k3t/

jquerycss

Answer №1

Here is a way to accomplish it...

Start by defining a class that will activate the element by changing its background color and adding a transition delay.

.active{
    background: #7b9d6f;
    border-color: #7b9d6f;
    transition-property: all;
    transition-delay: 2s;
}

Next, update your Javascript code to remove the condition like this:

$('#event_2').click(function(){
    $('#connector_1').css('background-position', '80px 0px');
    //myPos = $('#connector_1').css("background-position").split(" ");
    $(this).addClass('active');
});

Check out the LIVE DEMO

Answer №2

Implementing a callback function allows for execution after the pipe animation finishes.

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 unique feature where a bar emerges from the bottom of the screen, smoothly glides upwards, and then securely fastens to

I'm working on bringing to life a concept that I've been envisioning. The design would feature a long scrolling page with a unique navigation bar behavior. The idea is for the navigation bar to initially start at the bottom of the screen and the ...

javascriptjqueryhtmlcss

Using HTML video to fill entire div container

I'm currently facing an issue with using an HTML video as a fullscreen background replacement for an image. The problem is that the video overflows and covers the entire page instead of staying within the constraints of the header section. Here is th ...

htmlcsshtml5-video

JavaScript must be able to detect when the checkbox value is reversed, which is dependent on the user-entered data

Hey there, I come across a situation where users are selecting a checkbox to insert or update a row of data in a MySQL database through SparkJava/ Java. The functionality is working fine except for a minor glitch. The issue arises when the checkbox behav ...

javascriptjqueryhtmlvelocity

Enigmatic void appears above row upon removal of content from a single item

When I click on an item in my grid, the content of that item is moved to a modal. The modal functions properly, but I noticed that when the content is removed from the item, a space appears above it. I have found that using flexbox could solve this issue, ...

javascriptjqueryhtmlcssflexbox

Spinning divs using JavaScript when the mouse hovers over them, and then returning them to their original position when the mouse moves

I am looking to create a functionality where a div rotates when the mouse enters it and returns to its original position when the mouse leaves. Everything works fine when interacting with one div, but as soon as I try hovering over other divs, it starts gl ...

javascriptjqueryhtmlcss

PHP handling an undefined index error in AJAX/JQuery file upload for the 8th image

I found this code snippet from the following resource: Uploading Multiple Files using AJAX When trying to upload up to 7 images (each around 1MB in size), everything works smoothly. However, as soon as I attempt to upload the 8th image or select more tha ...

phpjqueryajaxfile-uploadundefined-index

Is it possible to determine if jQuery find returns true or false?

Snippet of HTML Code <div class="container1"> <div class="box1">Box 1</div> <div class="box2">Box 2</div> <div class="box3">Box 3</div> </div> <div clas ...

javascriptjquery

Error encountered while trying to retrieve JSON data

After running the following code, I encountered an issue I received an error message stating: Uncaught TypeError: Cannot read property 'searchname' of undefined What could be causing this error and how can I fix it? var selectedVal = "calend ...

javascriptjqueryjson

Is there a way to run a query in React without using await?

I'm trying to wrap my head around how queries work and came across this example: const citiesRef = db.collection('cities'); const snapshot = await citiesRef.where('capital', '==', true).get(); if (snapshot.empty) { cons ...

jqueryreactjsfirebasegoogle-cloud-firestore

What modifications were implemented in Bootstrap 5 to cause controls to automatically assume their maximum size?

After upgrading NodeJs to version 16.13.0 from 14.x, one of the modules that was updated was bootstrap. This caused me to remove my Jumbotron control due to the upgrade, although I don't believe that is directly related to the issue I am experiencing. ...

javascriptcssnode.jsreactjsbootstrap-5

Troubleshooting jQuery Div Separation Problem

Currently, I am working on implementing resizable sidebars using jQuery and potentially jQueryUI. However, I am encountering an issue with the resizing functionality. Specifically, the right sidebar is causing some trouble in terms of proper resizing, wher ...

javascriptjqueryjquery-uisplit.js

What is the best strategy for positioning an anchor element within a list item using JSX or Bootstrap in a way that maximizes efficiency?

I have the following code snippet <li className = "list-group-item list-group-item-success" key ={todo.id}>{todo.text}<a style="float:right;" onClick={() => props.onEdit(todo)} className="edit-todo glyphicon glyphicon-edit" href="#"& ...

cssreactjsbootstrap-4

Display an HTML5 canvas element on a live webpage

Recently I was given a task to create an HTML page that allows users to interact and generate templates on a web application. Users can use the web browser to design a template and save it. Seems simple, right? The challenge came when I needed to let user ...

jqueryhtmlcanvas

Technique in CSS/SASS to repair a div

Seeking a solution for fixing divs with text in CSS. I am aware of the background-attachment: fixed; property which creates a fancy effect. Is there a similar property to "fix" divs with text or how can this be achieved in Typescript? Your insight would be ...

htmlcsstypescriptsass

Modify the CSS formatting of a specific element with its designated ID

On my HTML page, I have an element that looks like this: <label id="lb">Label1</label> In my corresponding CSS file, I have defined the following style for it: #lb{ width:100px; } I want to override this style. What would be the most effect ...

htmlcss

Issues with Jquery .get() function in Internet Explorer

Encountering an issue with none other than IE8. The below code, simplified for clarity, is not functioning as expected: alert('before get'); $.get(getActivityURL('ActionName',{ ts: new Date().getTime(), ...other params...}), {cac ...

ajaxinternet-explorerjqueryinternet-explorer-8

Flexbox positioning: Absolute element within a relative container

Having a div using display:flex and position:relative, I am looking to add an overlay element at the bottom of this div by applying position:absolute to it. Ideally, the height of the overlay should be auto, but it's not necessary. The issue arises wh ...

htmlcssflexbox

Display WordPress post content within a specific div element

My Wordpress site has a unique homepage design featuring a div on the left showcasing the titles of the five most recent posts. Adjacent to that is an empty div on the right with a scroll bar. I am in search of a solution whereby clicking on any post tit ...

jqueryajaxwordpresshtml

I'm currently utilizing CSS GRID to create a map layout, but I'm encountering an issue where the layout is not filling the entire screen. I'm wondering how I can achieve this in Angular

Here is the unique html code snippet for a layout that dynamically creates grids using json input: <!DOCTYPE html> <html lang="en"> <head> <title>Booking Page</title> </head> <body> <div ...

htmlcssangulartypescriptcss-grid

What is the best way to center a Bootstrap 4 navigation menu horizontally?

The alignment of the navigation is causing a bit of confusion. I've attempted to set the links to navbar-brand, but while this centers them, it also causes other elements to shift slightly downward. Additionally, it's puzzling why the select opti ...

csstwitter-bootstrap