What is causing my background div to jerk around when I implement jQuery animate to adjust its height?

UPDATE: I have replicated my issue in jsFiddle: http://jsfiddle.net/leongaban/3v8vW/3/

I am dealing with 2 tabs - one should reduce the height of the form-background when clicked, while the other should increase it. I want a smooth animation without any abrupt transitions.

Upon clicking a tab, the other tab should be hidden.

Codepen: http://codepen.io/leongaban/pen/wipba

If you click on login, you will observe the animation in action. The login section has a height of 290px and the register section is set at 410px.

The animate code for this was taken from a basic example here.

My goal is to only animate the height adjustment, keeping the position and width unchanged. Setting properties like top and width were necessary to prevent erratic resizing of the .form-background div post-animation.

Can you identify what's causing this behavior? Any suggestions on resolving it would be appreciated :)

jQuery

    // tabs
    $('#login-form #tab-register').click(function() {

        $('#login-form').fadeToggle();
        $(".form-background").animate(
            {
                "top": "-342px",
                "width": "400px",
                "height": "410px"
            },
            "slow", function(){
                $('#register-form').fadeToggle();
            });
    });

    $('#register-form #tab-login').click(function() {

        $('#register-form').fadeToggle();
        $(".form-background").animate(
            {
                "top": "-214px",
                "width": "400px",
                "height": "290px"
            },
            "slow", function(){
                $('#login-form').fadeToggle();
            });
    });

CSS

.container .login-container .login-box .form-background {
  position: relative;
  top: -342px;
  height: 410px;
  background: white;
  -webkit-box-shadow: 0px 5px 15px rgba(50, 50, 50, 0.2);
  -moz-box-shadow: 0px 5px 15px rgba(50, 50, 50, 0.2);
  box-shadow: 0px 5px 15px rgba(50, 50, 50, 0.2);
  z-index: -1;
}

Codepen: http://codepen.io/leongaban/pen/wipba

Answer №1

Check out the jsFiddle Demo

Move your tabs to the outside. It's not necessary to repeat them for each tab content:

<div class="container">
    <div class='topbar'>
        <ul>
            <li class="short btn-off">Short</li>
            <li class="tall btn-off">Tall</li>
        </ul>
    </div>

    <div class="tall-content">
        <div>
            Tall Content
        </div>  
    </div>

    <div class="short-content">
        <div>
            Short Content
        </div> 
    </div>

    <div id='form-bg'></div>
</div>

I have also updated the animation algorithm. Now, it will first hide the other content without animation, then show the current one with a fade effect:

$(".short").click(function(){
    $('.tall-content').hide();
    $("#form-bg").animate({height:100},200);
    $('.short-content').fadeIn();
});

$(".tall").click(function(){
    $('.short-content').hide();
    $("#form-bg").animate({height:200},200);
    $('.tall-content').fadeIn();
});

Answer №2

For further details, please refer to this link: http://jsfiddle.net/nucky/Cu59K/

.topbar { 
  position: absolute; 
  top:0;
}

#form-bg {
  position:absolute; 
  top:60px;
}

Answer №3

To prevent the issue you mentioned, include overflow:hidden in your code.

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

What is the best way to center align and add an icon to the header in Ionic?

How can I center align an "ion-ios-arrow-up" icon in the header of my Ionic app, similar to the concept shown below? This is my HTML template: <ion-view cache-view="false" view-title="Historical HPP"> <ion-nav-bar class="nav-title-slide-ios7 ...

Is it possible for the HTML data attribute to store a direct link to a specific DOM element?

Can the HTML data- attributes be used to store a reference to another DOM element? As shown in this jQuery example: var domel1 = document.getElementById("#mydiv"); var domel2 = document.getElementById("#mydiv2"); $(domEl1).attr('data-domel', dom ...

Interactive Form directly linked to SQLite3 database

Looking for assistance with converting a modal from static, fake data to dynamic data from an SQLite3 database. The goal is to display a table of existing data and allow users to add new rows by clicking a +New button. However, when trying to incorporate ...

Finding the previous and next dates can be easily accomplished by combining the power of jQuery, AJAX

I have created a calendar using PHP with previous and next buttons. I am now looking to implement AJAX functionality to navigate to the previous or next date without reloading the page. Within the PHP file called by AJAX, I have a query that retrieves tas ...

Jquery Menu featuring subitems aligned to the right

I am experiencing an issue with my drop-down menu in ie6. The subitems menus are shifted to the right, rendering the menu useless. Here is the HTML code: <div id="navigation"> <a href="<?php echo base_url();?>" class="singl ...

Isotope grid shatters when browser window is resized

My goal is to design a 3-column grid using Twitter Bootstrap and Isotope. However, when I resize the browser to force the layout into a single column mode, Isotope fails and leaves large spaces both vertically and horizontally. Regular Layout Issues in ...

Horizontal scrolling alone is proving to be ineffective

My current HTML code includes a table that is integrated with PHP Laravel. The data is being pulled from Admin.php to populate the table, resulting in it being wider than the screen window. To address this, I added a horizontal scroll bar for navigation pu ...

Model-View-Controller - Utilize AJAX to upload a document

I've encountered an issue with uploading documents using Ajax in my code. When I check for Request.Files.Count, it always returns 0, preventing the file from being uploaded. Here is a snippet of the front-end code: <input type="file" name="na ...

The combination of absolute positioning and percentage-based height measurements allows for

For more information, go to http://jsfiddle.net/A2Qnx/1/ <div id='w'> <div id='p'> <div id='c'> </div> </div> </div> With absolute positioning enabled, div P has a height ...

What happens when we use an asterisk (*) in front of a CSS property?

input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; } input, textarea, select { *font-size: 100%; } The code snippet above is taken from the YUI reset css. Can you explain the significance of the asterisk (*) ...

What is the mechanism behind the jQuery ready function that enables its first parameter to transform into a jQuery object?

While browsing today, I came across this interesting code snippet: jQuery(document).ready(function($$){ console.log($$); }); It seems that $$ is recognized as the jQuery object itself. Typically, to achieve this, we would need to pass the jQuery varia ...

CSS3 columns causing <li>s to be cropped

I'm attempting to implement css3 columns with a list (<li>), but I'm running into some issues getting it to function properly. I have wrapped the <ul> in a div like this: .ul-container { -moz-column-width: 310px; -moz-column-gap ...

Adjusting the size of the div both horizontally and vertically in Angular 5 using the mouse cursor

As a beginner in Angular 5, I am looking to achieve horizontal and vertical resizing of a div by dragging with the mouse pointer. Can someone assist me in implementing this feature? ...

Alignment of Bootstrap thumbnails in a horizontal layout

After adding the thumbnail class to my thumbnails div, I noticed that some of the thumbnails were smaller in size than others. Wanting them all to have the same height, I decided to give each thumbnail a fixed height of 210px. However, this caused the sm ...

What is the proper way to link an AJAX response image stream to the image control?

I have successfully implemented an image control on my ASPX page with the following code: <div> <div class="ajaxdata"> <asp:Image ID="image2" runat="server"></asp:Image> </div> <a class="ajaxcall">cl ...

Retrieve the following span that has the specified class

I am working with the following HTML structure for <select> elements on my webpage: <div class="clsPropertyDiv clsPropertyId_16 "> <span class="inputTitle">You can select multiple items</span><br> <select i ...

Creating a dynamic dropdown list with PHP and AJAX using JQuery

I was attempting to create a dynamic dependent select list using AJAX, but I am facing issues with getting the second list to populate. Below is the code I have been working with. The gethint.php file seems to be functioning properly. I'm not sure whe ...

Ensure that the Bootstrap image element maintains its full height without resizing

While working on my Angular application, I encountered an issue with designing a side list-group of recent blogs using Bootstrap 4. When the aspect ratio is changed to mobile view, the images resize and become smaller to fit into the div as the title lengt ...

What could be the reason behind Google and Bing's mobile-friendly tests inaccurately flagging my site as non-mobile friendly?

Our website for resources is responsive and has been thoroughly tested on various real smartphones, including iPhone, Android, and Windows devices. It looks great on every phone we've tested it on. You can visit the resources website here: The site ...

The scrollbar track has a habit of popping up unexpectedly

Is there a way to prevent the white area from showing up in my divs where the scroll bar thumb appears? The issue seems to occur randomly on Chrome and Safari. This is the div in question .column-content{ height:60vh; padding: 10px 3px 0 3px; overf ...