Experience the captivating jQuery bounce animation enhanced with border box-sizing and a touch of padding

When the jQuery bounce effect is applied to a div with box-sizing: border-box and some padding, it appears to shrink by its padding size during the animation. Check out an example here.

HTML

<div class="example">
    This is an example div for bouncing!
</div>

CSS

.example {
    box-sizing: border-box;
    min-height: 100px;
    width: 250px;
    background-color: #435ff3;
    text-align: center;
    cursor: pointer;
    padding: 50px;
}

JavaScript

$('.example').click(function() {
    $(this).effect('bounce', { distance : 10, times: 2 }, 'slow');
});

Does anyone have an explanation for this interesting behavior?

jquerycssjquery-uipadding

Answer №1

There is a known bug that has been reported here. The ticket indicates that this issue should be resolved in Version 1.12.

One workaround could be to include an additional container with padding:

HTML

<div class="test">
    <div class="container">
        This is a test div for demonstration!
    </div>
</div>

CSS

.container{
    padding: 50px;
}

Please note that both margin and padding may be overridden during the effect due to the inline styles added via jQuery (in your specific case):

font-size: 100%; 
background: transparent none repeat scroll 0% 0%; 
border: medium none; 
margin: 0px; 
padding: 0px; 
position: relative; 
width: 250px; 
height: 140px; 
float: none;

Check out the demo here

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

The line-height property does not appear to have any effect when used within a table cell

I am struggling to format a table with fonts similar to the one shown in the image. I attempted to set the line-height for numbers to 33%, but so far, the line height has not been as expected. I have been unsuccessful in achieving the layout displayed belo ...

htmlcss

Display of certain special characters such as ">" may be affected when using UTF-8 encoding

Here are the codes I'm working with: ul.pathnav a:before{ content:"\0X3E"; text-decoration:none; } I have been trying to use the hex code \0x3e for ">", but it doesn't seem to be working. However, when I tried usi ...

htmlcssencodingutf-8

The slides on my Bootstrap carousel are failing to display

I attempted to study a Bootstrap carousel code for better understanding, but unfortunately, the slides are not functioning correctly. The first slide remains static without any movement. Any suggestions on how to resolve this issue? Below are the HTML and ...

htmlcsstwitter-bootstrapbootstrap-4

Transforming the color of Material Design Lite badges

Incorporating Material Design Lite (getmdl.io) into my web application, I have implemented a card with a badge displaying the number of notifications. Despite attempting to modify the css code as follows: .mdl-badge { background: #FF3D00; } I am unabl ...

csscss-selectors

What is the process for verifying the current row order in a sortable table?

I've been tackling a project where I need to create a "sortable" list of items arranged vertically. However, I've encountered an issue that's stumped me. Each row has its own unique id. How can I verify the new order and save it to the datab ...

jqueryjquery-ui-sortable

Retrieving data from an AJAX response using jQuery

I've been struggling for over an hour trying to find a solution to this seemingly basic issue. If anyone has any helpful links, I would greatly appreciate it. In PHP, I create the JSON like this: return json_encode(['error' => 'cus ...

phpjqueryajaxjson

"Exploring the use of AJAX requests and handling CookieOverflow in Ruby on Rails

I'm facing a challenge with my dynamic checklist as I encounter issues with AJAX requests and updating the database. The process involves asynchronously updating the database when an item is clicked on the checklist. Here's the javascript code th ...

jqueryruby-on-railsajaxsession-cookies

Accordion-style elements arranged in a grid format, smoothly displacing surrounding content

I am facing an issue with a grid of accordions, as demonstrated in the codesandbox linked below. The problem arises when I open one accordion, causing all the accordions in the row below to shift down. Ideally, only the accordion directly below should be p ...

cssflexboxmaterial-uigridaccordion

Steps for serializing multiple sortable items and subitems using jQuery

I found a solution on Stack Overflow that allows me to sort items and subitems using jQuery UI sortable. Everything is sorting correctly, but I'm struggling with serializing the data so that I can update the database accordingly. You can view my curr ...

javascriptjqueryhtmljquery-uijquery-ui-sortable

Place jQuery inside the <body> tag

Here is the structure I'm working with: <html> <head> </head> <body> <?php include('form.php')?> <script src='jquery.js'> </body> </html> The issue I am facing is th ...

phpjquery

Separate and add on the change validity status of an AngularJS form

If you want to test it out, check this jsFiddle link: HERE (it's recommended to view on a new jsFiddle, refer to the EDIT section of this post) I've noticed what seems like a bug in AngularJS or at least an unexpected behavior. When I detach a f ...

javascriptjqueryangularjsangularjs-directive

Disregard a specific CSS class that is assigned to a parent table element

<table class="table table-bordered table-hover table-condensed data_table"> <tbody data-bind="foreach: outboundFaxLogs"> <tr> </tr> <tr> <td></td> <td colsp ...

htmlcsshtml-table

What is the process for altering an SVG image following a click event in Javascript?

I have a tab within a div that includes text and an svg icon as shown herehttps://i.stack.imgur.com/TjwIK.png When I click on the tab, it expands like this https://i.stack.imgur.com/XNuBi.png After expanding, I want the svg icon to change to something e ...

javascripthtmlcsssvg

Javascript function to deselect all items

One of my functions is designed to reset all checkbox values and then trigger an AJAX request. However, there are instances when the function initiates before the checkboxes have been unchecked. function clear() { $("#a").prop("checked", false); $("#b ...

javascriptjqueryajaxpromise

IE11 not accurately calculating flex content width within a position: fixed element

Currently, I am developing a unique custom tooltip that utilizes the position: fixed property along with dynamic values for top and left to enable it to follow the mouse cursor. This tooltip features a rather intricate layout which has been constructed usi ...

cssinternet-explorerflexboxbootstrap-4internet-explorer-11

The animation for React-bootstrap buttons is experiencing issues and the buttons are not aligning to the

I'm facing an issue with my react-bootstrap component - the loading animation refuses to play. Furthermore, I've noticed that the button is not centering properly. While I can use margin-left: 30px; to adjust its position, this solution doesn&ap ...

cssreactjsreact-bootstrap

What is the best way to position divs within a container that is 50% width and 50% height?

Hey there! I'm trying to set up a form with two equal columns using the HTML and CSS3 code below. However, it seems like something is causing the second label "upto" to be positioned in the right corner. Please refer to the attached screenshot for mor ...

htmlformscssjquery-mobilemargin

Adding parameters to TR or TDs in DataTables 1.10.5 via Ajax: A step-by-step guide

My goal is to dynamically load datatable data using AJAX and customize the rows and cells by adding parameters such as classes or 'data' attributes. The challenge lies in utilizing a PHP helper that generates JavaScript code, as shown below: $da ...

phpjqueryjsonajaxdatatables

"Performing a series of getJSON requests with a delay between each call, iterating through an array

Could someone shed light on why my jQuery/JavaScript code runs with an unexpected flurry of ajax calls instead of at a steady 1-per-second rhythm? var i = 0, l = data.length; function geocode() { $.getJSON( 'https://maps.googleapis.com/maps/api ...

javascriptjqueryajaxjsonloops

Acquiring the value of jQuery for utilization in PHP

Below is the code I am working with: $('#topic').on('change', function() { var sel = $(this).find('option:selected').text(); $.ajax({ type: 'post', dataType: 'text', url: ...

phpjqueryajax