Using if-else statements in jQuery when animating a webpage

Question

Using if-else statements in jQuery when animating a webpage

While jQuery is running the .animate function, is it possible to interact with it? I have an animation that moves an image from bottom to top, but I need it to scale down when it reaches more than 70% of its distance traveled.

Imagine a bottleneck effect where the image needs to scale down as it gets closer to the top. But I'm not sure how to achieve this effect while the animation is running.

For example:

Action 1: Move 50% -- no problem

Action 2: Move 90% -- currently in progress -- but at 70%, scale the image down to 50%

EDIT

Thank you all for your suggestions, but unfortunately, I am still experiencing an offset issue between the circle and the water in my animation:

Take a look on CodePen.io

javascript jquery html css

Answer 1

Answer №1

Since no one else seems to be providing a response, I'll give it a shot.

You have the option of using either the step method or $.Animation. Both methods are quite similar in function. Below is an example using the latter approach. For examples on how to utilize the step method, you can easily find them here on SO.

var elem  = $('#some_element'),
    width = elem.width();

$.Animation( {left: elem.position().left}, 
    {
        left: 500
    }, {
        duration: 2000
    }
).progress(function (e) {
    var start  = e.tweens[0].start, // starting position
        end    = e.tweens[0].end,   // ending position
        now    = e.tweens[0].now,   // current position
        lapsed = Math.ceil(now / end * 100); // calculate percentage

    elem.css('left', now);

    if (lapsed > 70) { // check if 70% progress has been achieved
        elem.width(width + ((lapsed-70)*2));  // animate the width as well
    }
});

FIDDLE

Answer 2

Since no one else seems to be providing a response, I'll give it a shot.

You have the option of using either the step method or $.Animation. Both methods are quite similar in function. Below is an example using the latter approach. For examples on how to utilize the step method, you can easily find them here on SO.

var elem  = $('#some_element'),
    width = elem.width();

$.Animation( {left: elem.position().left}, 
    {
        left: 500
    }, {
        duration: 2000
    }
).progress(function (e) {
    var start  = e.tweens[0].start, // starting position
        end    = e.tweens[0].end,   // ending position
        now    = e.tweens[0].now,   // current position
        lapsed = Math.ceil(now / end * 100); // calculate percentage

    elem.css('left', now);

    if (lapsed > 70) { // check if 70% progress has been achieved
        elem.width(width + ((lapsed-70)*2));  // animate the width as well
    }
});

FIDDLE

Using if-else statements in jQuery when animating a webpage

Answer №1

Similar questions

Dynamic setting of field values in Django based on the values of other fields

How to delete the last item of an array in AngularJS using scope

Tips for displaying specific HTML elements in AngularJS using ng-repeat and ng-if

How can I center my dynamic CSS3 menu with varying widths?

Error: Unsupported Media Type when attempting to send JSON data from an AngularJS frontend to a Spring controller

The color scheme detection feature for matching media is malfunctioning on Safari

Error: The Gravatar service is unable to retrieve the property 'get' from an undefined source

Encountering an issue while running a query in Golang using the MySQL driver

The issue with MaterialUI Select's set value is that it consistently falls outside the expected

Show a variety of logos on the website based on the current date

Is it possible for someone to assist me in making my map stay in a fixed position?

"Enhancing User Experience: Dynamically switch between tab content in Angular UI Tab

Techniques for adding values to arrays in JavaScript

Storing a collection of strings in a mongoose schema: A step-by-step guide

Oops! There was a validation error as the duration was not formatted as a number. Please make sure to provide a valid numerical value for the duration field

Creating an identifier for the jQuery slideToggle function involves assigning a unique class or ID to

What is the method for inserting line breaks in Django at particular characters?

What is the purpose of using //<![CDATA[ and //]]> in a jQuery code snippet?

Tips for altering the checked status of a radio input in a React component

Clear out any unnecessary white space beneath the content on your webpage

Using if-else statements in jQuery when animating a webpage

Answer №1

Similar questions

Dynamic setting of field values in Django based on the values of other fields

How to delete the last item of an array in AngularJS using scope

Tips for displaying specific HTML elements in AngularJS using ng-repeat and ng-if

How can I center my dynamic CSS3 menu with varying widths?

Error: Unsupported Media Type when attempting to send JSON data from an AngularJS frontend to a Spring controller

The color scheme detection feature for matching media is malfunctioning on Safari

Error: The Gravatar service is unable to retrieve the property 'get' from an undefined source

Encountering an issue while running a query in Golang using the MySQL driver

The issue with MaterialUI Select's set value is that it consistently falls outside the expected

Show a variety of logos on the website based on the current date

Is it possible for someone to assist me in making my map stay in a fixed position?

"Enhancing User Experience: Dynamically switch between tab content in Angular UI Tab

Techniques for adding values to arrays in JavaScript

Storing a collection of strings in a mongoose schema: A step-by-step guide

Oops! There was a validation error as the duration was not formatted as a number. Please make sure to provide a valid numerical value for the duration field

Creating an identifier for the jQuery slideToggle function involves assigning a unique class or ID to

What is the method for inserting line breaks in Django at particular characters?

What is the purpose of using *//<![CDATA[* and *//]]>* in a jQuery code snippet?

Tips for altering the checked status of a radio input in a React component

Clear out any unnecessary white space beneath the content on your webpage

What is the purpose of using //<![CDATA[ and //]]> in a jQuery code snippet?