What is causing the animate function to hide the other div once the animation is completed?

Check out the code here http://codepen.io/kongakong/pen/wMQrBR

Javascript Section:

$(document).ready(function () {
  init();
});

function init() {
  $('#test').on('click', function () {
        $('.answer').animate({width: "hide"}, 1000, 'swing');

    });
}

CSS Section:

.row {
  position: relative;
  overflow-x: hidden;
}

.hidden {
  display: none;
}


.answer {
  font-size: 40px;
  color: red;
  width:100%;

  opacity: 1;
  z-index: 100;
  border: 1px solid red;
  text-align: center;
  background-color: #fff;
}

.answer-new {
  font-size: 40px;
  /* to make answer-new on top and cover answer */
  position: absolute;
   border: 1px solid blue;
   width: 100%;
  z-index: 1;
  text-align: center;
}

HTML Section:

<div class="contrainer">
  <div>
    <input id='test' type='button' value="test"></input>
  </div>

  <div class="row">
    <div class="answer-new">Under

    </div>
    <div class="answer">Top
    </div>
  </div>
  <div class="row">
    <div class="answer-new">Under1

    </div>
    <div class="answer">Top1
    </div>
  </div>

</div>

Here is a screenshot of the page before animation starts

https://i.sstatic.net/xlkjH.png

When the button is clicked, the animation runs smoothly. I anticipate that divs with css class answer-new remain visible. However, in the end, all the divs disappear.

I experimented with using '0' instead of 'hidden'. In this scenario, the text of the answer div remains visible - not completely hidden.

Why does this happen?

css

Answer №1

The reason for this issue is that the .row div has overflow-x: hidden;, causing the width of the .answer div to become hidden, resulting in no other divs being visible except for .answer-new.

Additionally, since .answer-new is set to position:absolute, it does not affect the width/height calculations. This causes it to hide all elements overflowing the .row.

To resolve this problem, you can add padding to the .row to create some space.

For example, you can add padding: 25px 0; as shown here. You can also set the top value for the absolute position div to top: 0; to position it correctly.

In addition, adding margin: -25px 0; to .answer will help display it properly from the top, aligning with the parent div's padding.

CSS:

.row {
  position: relative;
  overflow-x: hidden;
   padding: 25px 0;
}

.hidden {
  display: none;
}

.answer {
  font-size: 40px;
  color: red;
  width:100%;

  opacity: 1;
  z-index: 100;
  border: 1px solid red;
  text-align: center;
  background-color: #fff;
  margin: -25px 0;
}

.answer-new {
  font-size: 40px;
  /* to make answer-new on top and cover answer */
  position: absolute;
   border: 1px solid blue;
   width: 100%;
  z-index: 1;
  text-align: center;
  top:0;
}

Here is a working Fiddle link

Answer №2

The reason for this behavior is due to the fact that your container div, .row, does not have its own width or height dimensions, while the child div, .answer-row, has absolute positioning and only a width dimension. As a result, when the child div .answer is hidden, the parent div loses its height dimension, making it effectively invisible.

To resolve this issue, you can assign a height to the parent div .row. This way, when the child div .answer is hidden, the parent will remain visible, ensuring that the other child div, .answer-row, also remains visible based on its styling.

For a practical example, check out this fiddle where I have added a height to the .row div: See this fiddle.

Answer №3

Although I may not be able to fully comprehend the reasoning behind this behavior, I took the initiative to rectify it by restricting the width to just 1 pixel and eliminating the opacity.

function initialize() {
  $('#clickMe').on('click', function() {
    $('.response').animate({
      width: '1px',
      opacity: 0
    }, 2000, "swing");
  });
}

Modified Version

Answer №4

hopefully this solution using online jQuery will be beneficial for you.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">


<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  
<style type="text/css">
.row {
  position: relative;
  overflow-x: hidden;
}

.hidden {
  display: none;
}


.answer {
  font-size: 40px;
  color: red;
  width:100%;

  opacity: 1;
  z-index: 100;
  border: 1px solid red;
  text-align: center;
  background-color: #fff;
}

.answer-new {
  font-size: 40px;
  /* to make answer-new on top and cover answer */
  position: absolute;
   border: 1px solid blue;
   width: 100%;
  z-index: 1;
  text-align: center;
}
</style>


<body>

 <div class="container">
  <div>
    <input class="btn btn-default" id='test' type='button' value="test"></input>
  </div>

  <div class="row">
    <div class="answer-new">Under

    </div>
    <div class="answer">Top
    </div>
  </div>
  <div class="row">
    <div class="answer-new">Under1

    </div>
    <div class="answer">Top1
    </div>
  </div>

</div>
  
  <script type="text/javascript">
    $(document).ready(function(){
    $("#test").click(function(){
    $(".answer").animate({width:0,opacity:0},1000);
    });
    });
  </script>

</body>
</html>

Answer №5

In my opinion, I prefer using CSS classes to animate elements instead of relying on jQuery or JavaScript.

.answer {
  font-size: 40px;
  color: red;
  width:100%;

  opacity: 1;
  z-index: 100;
  border: 1px solid red;
  text-align: center;
  background-color: #fff;

  transition: 0.5s;
  overflow: hidden;
}

.answer.minimized{
  width: 0px;
}

For implementation in your JavaScript:

$('#test').on('click', function () {
    $('.answer').addClass('minimized');
});

Check out the demo for a visualization.

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

Retrieve the border color using Selenium WebDriver

Hey everyone, I'm currently trying to retrieve the border color of an extjs 4.2 form control text field using the getCssValue method. However, I'm having trouble getting the value as it's coming back blank. Below is a sample of my code that ...

javacssextjsseleniumselenium-webdriver

The dialog box is not taking up the full width of the browser window

I'm facing an issue with a dialog box that only occupies a portion of the browser width, despite having a width set to 100%. The backdrop, however, extends across the entire width. //App.js import React from "react"; import ConfirmationDial ...

javascriptcssreactjsmaterial-ui

Adjust the text size of Twitter Bootstrap on mobile screens

I recently started using Twitter Bootstrap. I am currently hiding certain <tr> elements on phone screens by utilizing the class="hidden-phone". However, I am now looking to resize the displayed text to better fit the screen. Is there a way to adjus ...

htmlcsstwitter-bootstrapresponsive-design

AngularJS script to dynamically update a table upon selecting an option from the dropdown menu

Just starting out with Angularjs and facing a challenge. I have a table with a "Update" button on the UI and a drop-down option in the 3rd column. The requirement is, upon selecting an option from the drop-down and clicking the "Update" button, the values ...

javascriptjquerycssangularjshtml.dropdownlistfor

The use of Material-UI collapse animation in a table results in the insertion of div elements, triggering a validateDOMNesting warning

Having a data-filled table, I am looking to implement smooth transitions when adding or deleting an item. This is a ReactJS project utilizing Material-UI. The desired effect is similar to the one demonstrated in their example. While they use a List compon ...

cssreactjshtml-tablematerial-ui

Is there a way to make a sass file universally accessible without having to import it into every file and causing an increase in bundle size?

Question How can I efficiently import variables.scss globally without the need to duplicate them in every file and reference them in my build instead of importing? Setup I am using Vue2 with laravel-mix, where I have imported index.scss in my main.js ...

cssvue.jswebpacksasslaravel-mix

Creating a custom HTML table layout with both variable and fixed column widths, along with grouping headers

Is there a way to format an HTML table so that it appears like this: <- full page width -> <-20px->< dynamic ><-20px->< dynamic > +------------------+-------------------+ ¦ A ¦ B ...

htmlcsshtml-table

Assistance with Squarespace code injection: Enhancing hover effects on the Flat-Iron template

While browsing the index gallery, I noticed that the Flat-iron template has an opacity change when you hover over images. I'm curious if it's possible to reverse this effect so that the images remain at a low opacity until hovered over to reveal ...

jqueryhtmlcsshoversquarespace

Adjust the size of h1 headings to be smaller than 768px within the

My goal is to have an h1 header within a row, with font awesome mark quotes displayed on the left and right. I am attempting to resize it once the screen width goes below 768px. Here's what I have so far: @media screen and (max-width: 768px) { h1 ...

twitter-bootstrapcss

Creating inner borders on a pie chart with HTML and CSS: A step-by-step guide

After putting my coding skills to the test, I successfully crafted a stunning pie chart using only HTML and CSS. https://i.sstatic.net/5xCbl.png Here's the code snippet I tinkered with: HTML - <div class="pie-chart"></div> CS ...

htmlcssscss-mixinsscss-lint

Modifying the background hue of the element-ui tooltip

I am currently working with vue.js version 2.6.10 and element-ui version 2.15.1. The element-ui component I am using is as follows: <el-tooltip content="Top center" placement="top"> <span>Dark</span> ...

cssvue.jsvuejs2tooltipelement-ui

The alterations made to a single dropdown option are causing ripple effects across all other dropdowns

There is an add button that continuously adds a div container containing two dropdowns. The selection in one dropdown affects the data in the other dropdown. When the add button is clicked, a second div with both dropdowns is added. However, changing the ...

javascripthtmlcssangular

Arrange elements with Material-UI's Grid system

Check out my codesandbox example (here) showcasing how I have set up my current app with Material-UI grid. I have 5 components that need to be positioned in a specific way for different screen sizes. For screens sized lg and above, I want the components t ...

cssreactjsmaterial-ui

The container does not extend to full size within the overflow area, resulting in no padding being applied

I've been encountering a persistent issue with this particular CSS problem where the overflowing content does not display the expected padding. To illustrate, take a look at this image: https://i.sstatic.net/056IH.png The challenge lies in setting p ...

htmlcss

"the content does not occupy the entire space of the parent

My TableRow expands across the width of the screen, and within it is a ListView with a layout_width set to match_parent. However, the ListView does not expand properly. This issue arose when I added two buttons in the next TableRow. Even after setting the ...

androidcssandroid-layoutwidth

Print a table in PHP with a horizontal layout

I've been at this for hours and can't seem to figure it out. Hopefully someone out there can lend a hand. The code below is echoing the result in a table vertically, but I really need the cells to be next to each other horizontally. Any advice o ...

phpmysqlcss

JavaScript or jQuery can be used to rearrange the position of child divs within parent divs with a single action

I am facing a dilemma with 5 identical divs, each containing text and an image. My goal is to rearrange the child divs so that the text comes after the image in each article. Put simply, I want the image to be displayed above the text in all instances. Al ...

javascripthtmljquerycss

Elements are failing to respond to the padding and margin adjustments in my CSS styling

I've been experimenting with creating a visually appealing div that serves as the centerpiece of a website. Imagine it resembling a standard "news" link. The width set at 80%, an image aligned to the left with a border, a headline detailing the lates ...

htmlcssmarginpadding

Changing the order of element names depending on their location within the parent element using jQuery

<div class="content"> <div> <input type="text" name="newname[name]0"/> <div> <input type="text" name="newname[utility]0"/> <div> <textarea name="newname[text]0 ...

javascriptjqueryhtmlcss

Tabulator now maintains the position of the rightmost column when adjusting the width of table columns

Is there a way to keep the right most column in a fixed position when adjusting column sizes? Whenever I try to resize a column, the right most column moves along with it, causing a gap or horizontal scroll bar to appear. How can I adjust all the columns ...

javascriptcssreactjstabulator