CODEWITHSUNDEEP
javascriptjquerydomjquery-animatesettimeout
user6446281
user6446281

Reputation:

How to remove a div after a second and make other one change in width in jquery

I need remove a div from DOM after 1 second, I found out how to hide using CSS, but the problem this divs stay in the DOM.

So how can remove this Div from DOM and make the other one be width:100% ?

css:

.header {
width:30%;
}

.sub-header {
width:70%;
}

html:

<div class="header">
 I need be removed not hided from DOM after 1 second
</div>

<div class="sub-header">
 I need be 100% after 1 second
</div>

Upvotes: 0

Views: 1496

Answers (4)

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

Use setTimeout() and apply the animate() as per your need.

setTimeout(function(){
  $('.header').remove();
  $('.sub-header').animate({
                   width: '100%',
                   marginLeft: '40%'
              });  
}, 1000);


setTimeout(function(){
  $('.header').remove();
  $('.sub-header').animate({
                   width: '100%',
                   marginLeft: '40%'
              });  
}, 1000);
.header {
width:30%;
}

.sub-header {
width:70%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
 I need be removed not hided from DOM after 1 second
</div>

<div class="sub-header">
 I need be 100% after 1 second
</div>

Upvotes: 4

Abolarin stephen
Abolarin stephen

Reputation: 358

Use settimeout()

setTimeout(function(){
  $('div.header').remove();
  $('div.sub-header').css("width: 100%");  
  $('div.sub-header').slideDown("300")
}, 1000);

The 1000 is calculated in milliseconds

Upvotes: 0

Pavel Staselun
Pavel Staselun

Reputation: 2010

setTimeout(
  () => {
    const elHeader = document.querySelector('.header');
    const elSubHeader = document.querySelector('.sub-header');
    elHeader.parentNode.removeChild(elHeader);
    elSubHeader.classList.add('sub-header_wide');
  },
  1000
);
.header {
  background: red;
  width:30%;
}
.sub-header {
  background: blue;
  transition: width 0.3s;
  width:70%;
}
.sub-header_wide {
  width: 100%;
}
<div class="header">
 I need be removed not hided from DOM after 1 second
</div>

<div class="sub-header">
 I need be 100% after 1 second
</div>

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

Plan your CSS well. You can use setTimeout to add a class and make the change.

setTimeout(function () {
  document.body.classList.add("after");
}, 1000);
.header {
  width: 30%;
  float: left;
}
.sub-header {
  width: 70%;
  float: left;
}

.after .header {
  display: none;
}

.after .sub-header {
  width: 100%;
  float: none;
}
<div class="header">
  I need be removed not hided from DOM after 1 second
</div>

<div class="sub-header">
  I need be 100% after 1 second
</div>

Upvotes: 2

Related Questions