Having trouble with adjusting the width of an absolutely positioned image using animation

Currently, I am using jQuery version 10.4.2 and I am trying to smoothly scale up an image that is absolute positioned. However, despite not encountering any errors with the code below, the animation does not happen as expected. Instead, the image suddenly jumps to its full size (100%).

HTML

<div class="box">
    <img class="scaleMe" src="img.gif" />
</div>

CSS

.box { position:relative; height:0; padding-bottom:61.6667%; background-image:url('background.gif'); }
.scaleMe { display:block; position:absolute; bottom:0; left:0; z-index:1; width:50%; }

JS

    $('.scaleMe').animate({width:'100%'}, 2000);

What could be going wrong in this scenario?

Update:

Check out this functioning jsFiddle example: http://jsfiddle.net/s_d_p/27DhK/

However, when you view this live demo here: , you will notice it doesn't work as intended.

javascriptjqueryhtmlcss

Answer №1

Make sure to include the src attribute in your image tag. Here is an example:

<div class="container">
    <img class="resizeImage" src="http://placekitty.com/g/200/300" />
</div>

http://jsbin.com/retoyo/

Answer №2

This method may seem a bit unconventional, but by first capturing the target width and animating to that pixel value before replacing it with a percentage, I was able to achieve the desired effect:

var elementToScale = $('.scaleMe');
var targetWidth = $('.box').width();
var scaleElement = function() {
    elementToScale.animate({width: targetWidth}, 2000, function(){
        elementToScale.removeAttr("style");
        elementToScale.css("width", "100%");
    });
}

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

Utilize AJAX to connect to a remote domain from an extension

I am currently working on creating a Chrome extension that will utilize AJAX to fetch data from a specific webpage and then generate notifications based on the content of that page. The webpage I am targeting is a ticketing system, and my goal is to deter ...

javascriptajaxgoogle-chrome-extensionsame-origin-policy

What is the best way to align a drop-down menu within my DIV container?

Here is the code snippet I am working with: <div id="one"> <a href="#" id="test1" > <button title="test1">test1</button> </a> <a href="#" id="test1" > <button title="test1">test1</button> &l ...

css

Align the content of a collapsed bootstrap row vertically

In a row, I have two columns, each containing their own row. When the page width hits the 'xs' break-point, the left column's row will stack its columns on top of each other. The right column is taller than the left column, which leaves a l ...

twitter-bootstrapcssflexboxbootstrap-4

Conditions in Apache mod_rewrite

Having trouble with Apache's module rewrite (creating browser-friendly URLs). My goal is to redirect every request to a specific PHP document if it contains a certain string: RewriteBase /folder/directory/ RewriteCond %{REQUEST_FILENAME} !-f RewriteC ...

phpjqueryajaxmod-rewritemultiple-conditions

Sorting a select element using Javascript/JQuery while taking into consideration the label attribute present in the options

It came to my attention that the jQuery options and examples only covered the text and value attributes, causing errors when attempting to add the label attribute. I am looking for a way to include the label attribute in the sorting process, especially whe ...

javascriptjqueryselecttextlabel

Large header bar positioned above navbar in Bootstrap 4 design

Is there a way to add a pagewide bar above the navbar that can disappear in mobile view? <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"> <div> Pagewide </div> < ...

csstwitter-bootstrapbootstrap-4

Empty Angular-chart.js Container

How can I resolve the issue of getting a blank div and no output while trying to display a chart where the options, labels, and other data are initialized in the TypeScript controller and then used on the HTML page? I added the angular-chart.js library us ...

javascriptangularjstypescriptangular-chart

Targeting all children instead of just the odd ones when using `nth-child(odd)`

In the portfolio, I have a unique requirement where every odd entry should be reversed. These projects are generated dynamically from an array and passed into the component through props. To style it, I'm utilizing styled-components. However, I&apos ...

cssreactjscss-selectorsstyled-components

Converting Javascript Array to PHP Array: A Step-by-Step Guide

For my web application, I am utilizing PHP and MySql. When inserting a string into Mysql, it is formatted as a JavaScript Array ["0","1","2","3","4","5","6"] After retrieving the value from the database, it is saved in a PHP Variable $dow I am now looki ...

javascriptphparrays

Prevent the browser from autofilling password information in a React Material UI textfield when it is in focus

I am currently utilizing React Material UI 4 and I am looking to disable the browser autofill/auto complete suggestion when focusing on my password field generated from `TextField`. Although it works for username and email, I am encountering issues with d ...

javascriptreactjsmaterial-ui

Encountering a 500 error while attempting to make two separate AJAX requests in Codeigniter

Currently working on a web application using Codeigniter, I am facing an issue with three dependent <select> inputs. The second <select> is reliant on the first, and the third is dependent on both the first and second. Using jQuery and AJAX to ...

jqueryajaxcodeigniter

Web browser displaying vertical scroll bars centered on the page

I'm new to HTML and have been experimenting with this CSS file to center my form. I've managed to get it working, but the issue now is that it's causing scroll bars to appear on the web browser. How can I resolve this without them? @import ...

htmlcss

A new value was replaced when assigning a JSON value inside a loop

Is there a way to generate a structure similar to this? { "drink": { "2": { "name": "coke", "type": "drink" }, "3": { "name": "coke", "type": "drink" } }, "food": ...

javascriptjqueryjson

Issue with jquery .click function not triggering after CSS adjustment

In the process of creating a fun game where two players take turns drawing on a grid by clicking <td> elements. Currently, I have implemented the functionality to toggle the background color of a <td> element from black to white and vice versa ...

javascriptjquerycssajax

Utilizing object categories to split arrays and extract values in JavaScript with Highcharts

After receiving an array with a number of objects, my goal is to split it based on categories. Once the sum value of categories in the array reaches 15, I need to further divide the array as shown below for better organization. Any assistance would be gre ...

javascriptarraysobjecthighchartssplit

Experiencing difficulty with passing a jQuery array to PHP

I am trying to pass the values of an array from a JavaScript variable to PHP using AJAX. The issue I'm facing is that after clicking the send button and checking the PHP file to see if the values were passed, it appears empty. However, when I inspec ...

javascriptphpjqueryajaxpdo

Avoid receiving input for a button that is being covered by another button

I am currently developing an Idle Game and I am looking to include 'buy buttons' for purchasing buildings, along with a sell button embedded within the buy button. Just as a heads up, these buttons are represented by DIVs acting as buttons. Here ...

javascripthtmlbuttonparent

Issue with click event for submit button in ASP.Net following a change in dropdown list index using JavaScript

Currently, I have an asp.net application where a confirmation popup alert is displayed when the selected index changes to a specific value ("Cancelled") in a dropdown list. <asp:DropDownList ID="ddlStatus" runat="server" CssClass="selectstyle" DataText ...

javascriptc#jqueryhtmlasp.net

Ensure that the view is only updated once the JSON has been completely received from the AJAX call in AngularJS

Just starting out with angularJS and still in the learning phase. I'm currently working on creating a navbar for the header that will fetch data from an ajax call. The issue I'm facing is that it displays {{obj.pageData}} until the data is fully ...

javascriptangularjsjsonajaxmodel-view-controller

What is the best way to remove an active item from a Vue v-list?

When using Vuetify's v-list-item directive, I encountered an issue where the active prop cannot be removed once an item has been selected. Here is my approach so far: <v-list-item-group pb-6 color="primary" class="pb-3 text-left"> ...

javascriptvue.jsvue-componentvuetify.js