Animate a DIV's width to zero, including any padding

I am a beginner when it comes to jQuery and CSS, and I am attempting to animate two DIVs with the class .iDoElement using the following JQuery code:

$( '.iDoElement' ).each(function () {
        var randomDelay = Math.floor(Math.random() * 600);          
        $(this).delay(randomDelay).animate ({width:0}, 1000); 
    });

However, both divs have padding-right and padding-left defined, which prevents them from reducing their width to zero. I have read that the width of a div affects its content and does not take into account the padding.

What is the best solution to this issue? Is animating padding-left and padding-right to zero the only option?

Thank you in advance.

jquerycss

Answer №1

Success! Check out the working demo here: http://jsfiddle.net/G6bTD/

$('.iDoElement').each(function () {
    var randomTime = Math.floor(Math.random() * 600);
    $(this).delay(randomTime).animate({width:'toggle'}, 1000); 
});

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

unable to establish a secure connection to the specified URL within my application

I am facing an issue with my form that includes hidden values which need to be sent to a URL upon submission. The URL is for secure card payment purposes, and when I try to process it through my app by opening the URL and sending the hidden values, the con ...

jqueryangularjscordovaphonegap-desktop-app

Is it possible to make AJAX requests in the same domain without using cookies?

It's interesting how Google and Twitter autosuggest tools utilize lightweight AJAX requests that do not include any cookies. I'm curious about how they accomplish this. I've researched methods such as CORS, but those seem to be limited to re ...

ajaxhttpjquerycookiesxmlhttprequest

How can CSS be used to print multiple pages without any margins? And what is causing this slight extra height in the output

Check out the Live Demo here, apologies for the messy CSS as I have been experimenting with different styles. I am currently attempting to print PDF files using the browser's print dialog. Each file consists of 4 pages in the DIN lang format with an ...

htmlcssprintingmedia-queries

Onload, capture page elements, delete them, and then access the original content

I am encountering two DIV elements on my page that I need to capture upon loading the page and preserve their contents until the page is refreshed. The nested DIV element is contained within the other one. After locating these elements initially, I want t ...

javascripthtmljquery

Conceal a div element only if it is nested within a particular div class

I have a question about hiding a specific div within another div. Here is the scenario: <div class="xp-row xp-first-row"> <div class="social-buttons"> Some Content Here </div> </div> The goal is to hi ...

htmlcss

What is the best way to use JavaScript to fill in missing images with alternative HTML content?

As a provider of a service that helps users find the location of pictures, I face a challenge due to the fact that the pictures are stored on another internal site. Some users may not have access to this site as my service offers additional information. Th ...

javascripthtmlcss

Modify the HTML of the page after altering the dropdown selection

I have a total of 3 pages, including the main page. I am looking to access the first and second pages by changing the dropdown list selection. This is my jQuery code within my HTML file named main.html. <html> <head> <link rel=&quo ...

phphtmljquery

Move the object beyond the boundaries of the container that can be scrolled

I'm having an issue where the "item" is draggable, but once I try to move it outside of the scrollable container, it disappears. I've attempted adjusting the z-index, but it doesn't seem to be resolving the problem. Any suggestions on what m ...

jqueryhtmlcssjquery-ui

Using ASP.NET MVC and jQuery Ajax to close and refresh a parent table from a modal dialog

I am relatively new to both MVC and jQuery, and I'm struggling to make them work together. I've managed to put together a modal dialog form with an ajax postback, but the UI is presenting challenges for me. Despite looking for examples of MVC and ...

javascriptjqueryajaxasp.net-mvc

Executing a JQuery function when the webpage is loaded

I am attempting to execute some jQuery code when the page loads, but it doesn't seem to be working properly. The goal is to check if a link has already been saved and, if so, display a table with that information. Is this achievable? It should apply t ...

jqueryhtmldom

Displaying the user's username upon logging into a website is a simple yet effective

I have successfully developed a simple web page using PHP and HTML. However, I am facing an issue in displaying the username after login. Additionally, I would like to hide the login and signup sections after successful login. Can anyone provide assistance ...

phphtmlcss

Tips for extracting data from various select drop-down menus within a single webpage

As a newcomer to JQuery, I apologize if this question seems basic. I have a page with 20 categories, each offering a selection of products in a drop-down menu. The user will choose a product from each category, triggering an ajax call to retrieve the pric ...

javascriptjqueryajax

What is the best method for dynamically generating a 3-column table (i.e. a tile list)?

Here is a snippet of my JSON-formatted data: {"mydata": [{"phone":"5456868","name":"Dave"},{"phone":"9999875","name":"Susan"}, {"phone":"9994058","name":"Mary"},{"phone":"9995658","name":"Jan"}, {"phone":"3584650","name":"Yanni"},{"phone":"4512523"," ...

jqueryjson

When utilizing jQuery and Ajax for form submission, PHP is unable to retrieve any data

I'm encountering an issue when trying to submit a form with only a radiobutton group named radiob. The script I am using for submitting the data is as follows: <script type="text/javascript"> $(function() { $("#myForm").submit(funct ...

phpjavascriptjqueryajax

Error message encountered: "Forbidden - CSRF cookie is not set while attempting a POST request with Django

In my Django 3 application, I have implemented jQuery Ajax posts on bootstrap modals. There are several buttons that do not belong to any form but trigger a post request to specific URLs. All Django methods follow the guidelines mentioned here: https://do ...

pythonjquerydjangoajax

Increasing the level of CSS list counters

HTML <ol> <li>item1 <ol> <li>item2</li> </ol> </li> <li>item1 <ol> <li>item2</li> <li>item3</li> </ol> </li> </ol> SC ...

htmlcsscss-counter

Making adjustments to the Bootstrap CSS design by removing certain elements

I have inserted a styling link from Bootstrap into the header section of my page, but it is applying additional styles to my cards which I don't want. Is there a way to eliminate these unwanted styles without removing the Bootstrap CSS link? Below, y ...

htmlcsstwitter-bootstrapbootstrap-5

Adding images sourced from the News API

I have successfully integrated an API from newsapi.org, and it's functioning well. However, the data I receive is only in text format and I would like to include images for each headline. I'm unsure of how to do this since the headlines are dynam ...

jqueryhtmljsonajax

SASS : Loop not producing the most efficient CSS output

Is there a way to optimize CSS generation using a @for loop in SASS? An example speaks louder than words: Here is my SASS code: @for $i from 1 through 2 { .table-lg-#{$i}, .table-md-#{$i}, .table-sm-#{$i}, .table-xs-#{$i} { background: red; ...

cssloopssass

"Utilizing datatables to efficiently submit form data to the server-side

I'm curious for those who utilize the Datatables javascript plugin, is there a way to replicate this specific example using server-side data? The current example I came across has its data hardcoded directly in the HTML. ...

javascriptjquerydatatables