To achieve smoother transitions when concealing content, ensure the divs are programmed to

I have successfully implemented code that removes a div and animates the content inside to create a sliding effect. However, I am facing an issue where the divs below seem to jump up and I am looking for a way to make this transition smoother. Here is the code snippet I am using:

$(document).on('click', 'div', function() {
  const span = $(this).find('span');
  const div = $(this);
  span.css({
    'right': '100%'
  });
  window.setTimeout(function() {
    div.hide();
  }, 250);
})
div {
  width: 100%;
  height: 5em;
  text-align: center;
  vertical-align: middle;
  padding: 20px;
  background-color: #e6e6e6;
  margin-bottom: 10px;
}

div>span {
  right: 50%;
  display: block;
  position: absolute;
  transition: all 0.25s ease-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
  <span>
    one
  </span>
</div>
<div>
  <span>
    two
  </span>
</div>
<div>
  <span>
    three
  </span>
</div>
<div>
  <span>
    four
  </span>
</div>

javascriptjqueryhtmlcss

Answer №1

Utilize the slideUp function from jQuery with a specified duration parameter

$(document).on('click', 'div', function() {
  const span = $(this).find('span');
  const div = $(this);
  span.css({
    'right': '100%'
  });
  window.setTimeout(function() {
    div.animate({height: 0, padding: 0}, 250);
  }, 250);
})
div {
  width: 100%;
  height: 5em;
  text-align: center;
  vertical-align: middle;
  padding: 20px;
  background-color: #e6e6e6;
  margin-bottom: 10px;
}

div>span {
  right: 50%;
  display: block;
  position: absolute;
  transition: all 0.25s ease-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
  <span>
    one
  </span>
</div>
<div>
  <span>
    two
  </span>
</div>
<div>
  <span>
    three
  </span>
</div>
<div>
  <span>
    four
  </span>
</div>

One issue that arises is the change in margins when using slideUp, resulting in smaller gaps between the boxes during animation. To address this, only animate the height and padding properties.

$(document).on('click', 'div', function() {
  const span = $(this).find('span');
  const div = $(this);
  span.css({
    'right': '100%'
  });
  window.setTimeout(function() {
    div.animate({height: 0, padding: 0}, 250)
    .animate({margin: 0}, 50);
  }, 250);
})
div {
  width: 100%;
  height: 5em;
  text-align: center;
  vertical-align: middle;
  padding: 20px;
  background-color: #e6e6e6;
  margin-bottom: 10px;
}

div>span {
  right: 50%;
  display: block;
  position: absolute;
  transition: all 0.25s ease-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
  <span>
    one
  </span>
</div>
<div>
  <span>
    two
  </span>
</div>
<div>
  <span>
    three
  </span>
</div>
<div>
  <span>
    four
  </span>
</div>

Answer №2

Enhance the hide function by adding value to it, resulting in a smoother transition.

$(document).on('click', 'div', function() {
  const span = $(this).find('span');
  const div = $(this);
  span.css({
    'right': '100%','height':'0px','transition':'5s'
  });
  window.setTimeout(function() {
    div.hide(500);
  }, 250);
})
div {
  width: 100%;
  height: 5em;
  text-align: center;
  vertical-align: middle;
  padding: 20px;
  background-color: #e6e6e6;
  margin-bottom: 10px;
}

div>span {
  right: 50%;
  display: block;
  position: absolute;
  transition: all .25s ease-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
  <span>
    one
  </span>
</div>
<div>
  <span>
    two
  </span>
</div>
<div>
  <span>
    three
  </span>
</div>
<div>
  <span>
    four
  </span>
</div>

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

Issue encountered when attempting to save .pdf documents as BLOBs in MySQL database using PHP

I created a simple HTML form that allows you to upload files and stores all the information in a database. Everything is functioning properly when saving images, however, there seems to be an issue when trying to save PDF files. Is there anyone who could ...

phphtmlmysqlpdf

Can an array be generated on-the-fly with objects contained within it?

Seeking advice on looping through an array of objects to achieve a specific result. Here is the initial array: var testArray = [{'name':'name1', 'xaxis':'xaxis1', 'yaxis':'yaxis1'}, ...

javascriptarraysjsonloopsobject

What is causing the issue of the page overflowing in both the x and y axis while also failing to center vertically?

I've been trying to align the <H4> styled component to the center of the page using flex-box, but it's not working as expected. I also attempted using margin:0 auto, but that only aligned the H4 horizontally. Additionally, I'm investi ...

javascriptreactjsmaterial-uistyled-components

get direct access to the children of a specific div element

Here is the code snippet in HTML format. <div id="this"> <a href="xxx"> xx</a> <a href="yy"> yy</a> <a href="zzz"> zzz</a> aaa <a href="bbb"> bbb</a> ccc </div> I am look ...

jqueryhtmlnode.jsdomcheerio

What sets Koa apart when it comes to understanding the distinctions among await next(), return await next(), return next(), and next() in middleware?

The provided information explains the function of using 'await next()' in middleware to pause the middleware and initiate the next middleware downstream until all middlewares have completed execution. Once this happens, the process will start in ...

javascriptnode.jspromiseasync-awaitkoa

Iterate through the input values using a for loop and output the value of each individual input

I am working on an express app where I need to loop through data in my EJS file to create 5 hidden input fields, each with a unique value. However, I am struggling to extract the values of these inputs using JavaScript. Despite trying multiple methods, I ...

javascriptexpress

Tips for adjusting the position of the sidebar with a grid system

I am working with a traditional design: #divleft{ float:left; } #sidebar{ float:right; } @media screen and (max-width: 900px) { #divleft, #sidebar{ float:none; } divleft and sidebar are elements within panelb; Now, I am exploring ...

csscss-grid

Dealing with JSON data retrieved from a Django QuerySet using AJAX

I am utilizing a Django QuerySet as a JSON response within a Django view. def loadSelectedTemplate(request): if request.is_ajax and request.method == "GET": templateID = request.GET.get("templateID", None) ...

javascriptjsondjangoajax

A guide to eliminating duplicate values within an array and across multiple arrays with the help of jQuery

Looking for assistance with jQuery to find and alert repeated values in my code. Below are example arrays: a1 = {1,2,3,4,5,6,4} a2= {9,8,7}, a3= {a,b,c,d,e,7} I want to identify the value 4 in array "a1" and give an alert, as well as identify the value ...

javascriptjquery

Unexpected Error Causing Failure in jQuery Ajax Call

My jQuery ajax call is encountering an undefined error. Here is my JavaScript code snippet: $.ajax({ type: "POST", url: "Data/RealTime.ashx", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", timeout: 15000, ...

asp.netjqueryajaxashxgeneric-handler

Unable to pass a $scope variable into an Angular filter due to interpolation error

In my Angular application, I have a filter that takes a user ID and converts it into a user image URL. It does this by checking if the ID exists in an array and returning the corresponding image URL from the array passed to the filter. The filter is fu ...

javascriptangularjsionic-frameworkinterpolationangularjs-filter

Is there a way to showcase a row of images when a button is clicked?

I am looking to create a functionality where pressing one of the buttons shown in the image below will toggle visibility of specific sections containing 3 images each. For example, clicking on "Tapas" will only display tapas images and hide main course ima ...

javascripthtmljquerycss

Verifying Angular (2+?) Compatibility: Opening and Closing Material mat-menu on Hover [GUIDE]

After extensive research, I tried various methods to hover a material menu to display its options. However, the solutions I came across were either too complicated or ineffective. Therefore, I decided to develop my own solution by combining elements of e ...

javascriptangularangular-materialangular8

Implement JQuery UI Accordion to enhance navigation on mobile devices

I am implementing the JQuery UI Accordion to expand content on a website. Below is the basic markup structure: <div class="accordion"> <h2>Heading</h2> <div>Content</div> <h2>Heading</h2> <div& ...

jqueryhtmlcssjquery-ui

Create a custom loading spinner for a jQuery AJAX request

How can I add a loading indicator to my Bootstrap modal that is launched from a link? Currently, there is a 3-second delay while the AJAX query fetches data from the database. Does Twitter Bootstrap have built-in functionality for this? UPDATE: Modified J ...

javascriptjqueryhtmlajax

Update background to full screen and include text when hovering over DIV

Currently, I am utilizing Bootstrap and have a layout with 6 columns containing icons/text within. I desire to implement a hover effect where each column triggers a background change in transition for the entire section. In addition, text and button elemen ...

javascriptjquerycsstwitter-bootstrap

Adjusting the style attributes for Material-UI Icons

I could use some assistance with changing the CSS property of MUI icons in order to assign a specific color when the icon is focused. I have implemented the icons in the header and am displaying different pages below them, so I would like to give each ac ...

cssmaterial-ui

Separate each element with a time gap when using the .each() function in

Below is the code snippet that I have: $('.action-button').each(function(i, obj) { $(obj).trigger('click') }); I am looking to introduce a delay between each iteration of the loop, ideally a 5-second delay. Is it achievable through se ...

javascriptjquery

Activate scroll event when image src changes in Angular using jQuery

Seeking assistance with utilizing jQuery to scroll to a specific thumbnail inside a modal when left/right arrows are pressed. The modal should appear when the user clicks on an image. I've managed to implement scrolling upon clicking a thumbnail, but ...

javascriptjqueryhtmlangularjs

Tips for creating equal height columns in Bootstrap 4

Working with Bootstrap 4 Beta in an attempt to create two columns that maintain full height regardless of screen size. The code below functions perfectly, ensuring both columns maintain full height across all devices. However, upon inserting the bootstra ...

javascriptjqueryhtmlcsstwitter-bootstrap