Preserve the original position of the inner <div> when animating the container <div> using JQuery

Question

Preserve the original position of the inner <div> when animating the container <div> using JQuery

I am currently working on a small website and encountering some challenges with jQuery animation. My issue involves placing a single character text inside a circle and wanting it to grow when the user hovers over it, while keeping the inner text in its original position. The circle should shrink back to its original size upon the mouse leaving the area. Although the growing/shrinking aspect is functioning properly, the problem lies with the inner text changing its position upon hover.

Below is the HTML code:

 <body>
 <div class="steps">
    <div id="one" class="number">
        <div id="num-text">
            <p><strong>1</strong>
            </p>
        </div>
    </div>
 </div>
 </body>

In this setup, 'steps' acts as a container and 'number' represents the circle. You can find a JSFiddle link for this question here: http://jsfiddle.net/Rockr90/hZSKA/

Thank you!

Edit: It seems that the flickering issue only occurs in Chrome. The example using CSS3 works fine on IE and Firefox, leading me to believe that it might be related to webkit?

javascript jquery html css

Answer 1

Answer №1

You can achieve this effect using just CSS! There is no need for jQuery in this case. Let me show you how it's done with an example. I utilized the display table property to create a circle and used display table-cell to center the text perfectly within it.

HTML

<div class="circle">
    <p>1</p>
</div>

CSS

.circle {
    position:relative; //Setting up position (not necessary, but included for demonstration)
    top:100px;
    left:100px; // Setting width and height
    width:100px;
    height:100px;
    display:table; // Using table display property for centered <p> with table-cell
    background-color:blue;
    border-radius:50%; // Creating a circular shape
    -webkit-transition: all 0.5s; // Adding transition effects
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.circle:hover {
    margin-left:-10px; // Increasing height and width on hover
    margin-top:-10px; // Setting negative margins to keep it in place
    width:120px;
    height:120px;
}

.circle p {
    display:table-cell; // Magic of table-cell display
    vertical-align:middle; // Centering the text vertically
    text-align:center;
    font-size:2em;
    color:white;
}

FIDDLE

http://jsfiddle.net/n6D46/

Answer 2

You can achieve this effect using just CSS! There is no need for jQuery in this case. Let me show you how it's done with an example. I utilized the display table property to create a circle and used display table-cell to center the text perfectly within it.

HTML

<div class="circle">
    <p>1</p>
</div>

CSS

.circle {
    position:relative; //Setting up position (not necessary, but included for demonstration)
    top:100px;
    left:100px; // Setting width and height
    width:100px;
    height:100px;
    display:table; // Using table display property for centered <p> with table-cell
    background-color:blue;
    border-radius:50%; // Creating a circular shape
    -webkit-transition: all 0.5s; // Adding transition effects
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.circle:hover {
    margin-left:-10px; // Increasing height and width on hover
    margin-top:-10px; // Setting negative margins to keep it in place
    width:120px;
    height:120px;
}

.circle p {
    display:table-cell; // Magic of table-cell display
    vertical-align:middle; // Centering the text vertically
    text-align:center;
    font-size:2em;
    color:white;
}

FIDDLE

http://jsfiddle.net/n6D46/

Answer 3

Answer №2

To center #num-text vertically by giving it a height, you can utilize the absolute positioning already in place:

#num-text {
    position:absolute;
    text-align:center;
    color:#eee;
    font-size:24px;
    width:100%;
    height: 24px;
    top:50%; margin-top:-12px; }

Check out the demonstration here: http://jsfiddle.net/hZSKA/1/

It may be possible to achieve the same effect using CSS3, but this approach may not be compatible with older browser versions.

Answer 4

To center #num-text vertically by giving it a height, you can utilize the absolute positioning already in place:

#num-text {
    position:absolute;
    text-align:center;
    color:#eee;
    font-size:24px;
    width:100%;
    height: 24px;
    top:50%; margin-top:-12px; }

Check out the demonstration here: http://jsfiddle.net/hZSKA/1/

It may be possible to achieve the same effect using CSS3, but this approach may not be compatible with older browser versions.

Answer 5

Answer №3

If you're looking for a quick solution to add some animation, consider incorporating #num-text into the animation:

     function () {
        $(this).animate({
            height: '-=10px',
            bottom: '-=5px',
            width: '-=10px'
        }, 50);
        $('#num-text').animate({'top': '-6px'}, 50)
    });
});

Check out the demonstration on JSFiddle: http://jsfiddle.net/hZSKA/5/

Keep in mind that there may be more optimized solutions available as well.

UPDATE: Apologies for linking to the incorrect JSFiddle before.

Answer 6

If you're looking for a quick solution to add some animation, consider incorporating #num-text into the animation:

     function () {
        $(this).animate({
            height: '-=10px',
            bottom: '-=5px',
            width: '-=10px'
        }, 50);
        $('#num-text').animate({'top': '-6px'}, 50)
    });
});

Check out the demonstration on JSFiddle: http://jsfiddle.net/hZSKA/5/

Keep in mind that there may be more optimized solutions available as well.

UPDATE: Apologies for linking to the incorrect JSFiddle before.

Preserve the original position of the inner <div> when animating the container <div> using JQuery

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to enable my search function to filter out specific items from a table?

Show values in an angular template using an array

What is the process of creating and customizing popovers in Bootstrap 5 with jquery?

Error message: The Bootstrap .dropdown() method failed because it encountered an "Uncaught TypeError: undefined is not a function"

Having trouble storing the message ID within the user Object using Mongoose

What is the best way to deploy a Vue Webpack application using Sails.js?

Having trouble with JavaScript concat function not behaving as it should? Can you provide more details to

When using iOS, inserting an iFrame with a source URL (SRC) on a webpage will automatically open the URL

Excluding node modules when not included in tsconfig

Displaying iframes in AngularJS using a service

Trigger an AJAX request to execute a PHP script when a button is clicked

Exploring an Array of Arrays with jQuery

Feeling trapped during the process of setting up a intricate jQuery Image Slider

Rails: Problematic Jquery Ajax behavior when using slidetoggle

Proceed to the next request after the initial request has finished executing in node

Why isn't my onScroll event triggering in my React.js application? What mistake am I making?

"Implementing AngularJS bidirectional data binding to dynamically link user inputs with corresponding fields

What steps should I take to incorporate a timer into my bot similar to the timer used by other giveaway bots

Maintain consistent spacing after receiving a value

Creating a new route in a Express JS server to specifically handle POST requests