Div element to animate and vanish in a flash

Question

Div element to animate and vanish in a flash

I'm attempting to create a smooth slide effect for a div element before it disappears. Below is the code I am currently using:

function slideLeft(element) {
  $("#" + element).animate({
    left: "510"
  }, {
    duration: 750
  });
  document.getElementById(element).style.display = "none"; 
}

When I remove the last line of code, the div smoothly slides to the left over 750ms. However, adding the line causes the div to simply vanish.

I tried inserting the following before the last line:

wait(750);

The 'wait' function was defined as:

function wait(ms)
{
  var d = new Date();
  var d2 = null;
  do { 
    d2 = new Date(); 
  } while(d2-d < ms);
}

Unfortunately, this resulted in the div lingering for 750ms before disappearing abruptly. My goal is for the div with the ID of 'element' to gracefully slide and then disappear with display:none. Any suggestions or ideas on how to achieve this? Thank you.

javascript jquery css

Answer 1

Answer №1

To fully utilize jQuery's animate method, make sure to include the complete option. Additionally, if you already have the object at hand, there is no need to search for it again. Simply employ the this keyword within your complete function to apply additional animations directly to the object.

$("#" + current_my).animate({ left: "510" }, { duration: 750 }, function() {
   $(this).hide();
});

Answer 2

To fully utilize jQuery's animate method, make sure to include the complete option. Additionally, if you already have the object at hand, there is no need to search for it again. Simply employ the this keyword within your complete function to apply additional animations directly to the object.

$("#" + current_my).animate({ left: "510" }, { duration: 750 }, function() {
   $(this).hide();
});

Answer 3

Answer №2

To ensure the div is hidden properly, it's recommended to hide it within the complete callback function.

function slide_in(current_my)   {
   $("#" + current_my).animate({
      left: "510"
    }, 750, function() {
        document.getElementById(current_my).style.display = "none";
    });
}

Check out this documentation for more details.

Answer 4

To ensure the div is hidden properly, it's recommended to hide it within the complete callback function.

function slide_in(current_my)   {
   $("#" + current_my).animate({
      left: "510"
    }, 750, function() {
        document.getElementById(current_my).style.display = "none";
    });
}

Check out this documentation for more details.

Answer 5

Answer №3

After the animation completes, Animate provides a callback function that can be utilized for further actions.

function slide_in(current_my)   {
    $("#" + current_my).animate({
         left: "510"
    }, {
         duration: 750
    }, function () {
         document.getElementById(current_my).style.display = "none"; 
    });
}

Answer 6

After the animation completes, Animate provides a callback function that can be utilized for further actions.

function slide_in(current_my)   {
    $("#" + current_my).animate({
         left: "510"
    }, {
         duration: 750
    }, function () {
         document.getElementById(current_my).style.display = "none"; 
    });
}

Answer 7

Answer №4

If you're looking for an alternative method, consider using animate.css. Simply adjust the animation duration in the CSS file to customize your animations.

$(document).ready(function() {
$('button.btn').click(function() {
  $('div.box').addClass('animated fadeOutLeftBig');
  });
});

.box {
  width: 50px;
  height: 50px;
  margin-left: 200px;
  background-color: red;
}

.box p {
  text-align: center;
  font-size: 1em;
}

div.box {
  -webkit-animation-duration: 5s;
  -webkit-animation-delay: 0s;
  -moz-animation-duration: 5s;
  -moz-animation-delay: 0s;
  -ms-animation-duration: 5s;
  -ms-animation-delay: 0s;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <p>Test</p>
</div>
<button class="btn">Fade Left</button>

Answer 8

If you're looking for an alternative method, consider using animate.css. Simply adjust the animation duration in the CSS file to customize your animations.

$(document).ready(function() {
$('button.btn').click(function() {
  $('div.box').addClass('animated fadeOutLeftBig');
  });
});

.box {
  width: 50px;
  height: 50px;
  margin-left: 200px;
  background-color: red;
}

.box p {
  text-align: center;
  font-size: 1em;
}

div.box {
  -webkit-animation-duration: 5s;
  -webkit-animation-delay: 0s;
  -moz-animation-duration: 5s;
  -moz-animation-delay: 0s;
  -ms-animation-duration: 5s;
  -ms-animation-delay: 0s;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <p>Test</p>
</div>
<button class="btn">Fade Left</button>

Answer 9

Answer №5

Let's add a twist to the request and make it more entertaining. Instead of using a function, let's introduce an event to initiate the animation by passing location and duration values just for fun:

$(document).on('slidehide', '.myanimate', function(event, requestedDuration, whereTo, shouldHide) {
  var position = $(this).position();
  $(this).animate({
    left: whereTo
  }, {
    duration: requestedDuration,
    start: function() {$('.silly').toggle(shouldHide);},
    complete: function() {
      $(this).toggle(!shouldHide);
    }
  });
});

$('.myanimate').on('click', function() {
  console.log('moving');
  $(this).trigger('slidehide', [750, 510, true]);
});
// Just for restarting or seeing again
$(document).on('click', '.silly', function() {
  console.log('restart');
  $('.myanimate').show().trigger('slidehide', [750, 10, false]);;
});

.myanimate {
  position: absolute;
  left: 100px;
}

.silly {
  display: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myanimate">Greetings! (Click to trigger)</div>
<div class='silly'>Animation finished. (Click to restart)</div>

Answer 10

Let's add a twist to the request and make it more entertaining. Instead of using a function, let's introduce an event to initiate the animation by passing location and duration values just for fun:

$(document).on('slidehide', '.myanimate', function(event, requestedDuration, whereTo, shouldHide) {
  var position = $(this).position();
  $(this).animate({
    left: whereTo
  }, {
    duration: requestedDuration,
    start: function() {$('.silly').toggle(shouldHide);},
    complete: function() {
      $(this).toggle(!shouldHide);
    }
  });
});

$('.myanimate').on('click', function() {
  console.log('moving');
  $(this).trigger('slidehide', [750, 510, true]);
});
// Just for restarting or seeing again
$(document).on('click', '.silly', function() {
  console.log('restart');
  $('.myanimate').show().trigger('slidehide', [750, 10, false]);;
});

.myanimate {
  position: absolute;
  left: 100px;
}

.silly {
  display: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myanimate">Greetings! (Click to trigger)</div>
<div class='silly'>Animation finished. (Click to restart)</div>

Div element to animate and vanish in a flash

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Node.js setInterval is a method used to repeatedly execute a function

employ varying XSL stylesheets to display an XML document in a separate window

Tips for patiently waiting for an axios request to finish

`Why won't the checkbox uncheck when the dropdown is changed in jQuery?`

Stop Code Execution || Lock Screen

Display a label upon hovering over an image

The response from the Ajax request in jQuery did not contain any content to download

Troubleshooting Database Saving Problem with Vue.js and Ruby on Rails

Having trouble with getting the background image URL to work in Django CSS?

Issue with NextJs function not receiving the specified argument variable

Fetching an item from Local Storage in Angular 8

How can I pass an array from HTML to Node.js and subsequently store it in MongoDB?

Issue with KeyboardDatePicker in Material-UI/Pickers occurs when InputAdornmentProps property with position start is added, leading to an unexpected margin

problem with nivo slider causing content to overflow

Reordering items in Angular2 ngFor without having to recreate them

Replicate a click using jQuery to retrieve a filtered multigallery based on the URL

Interactive multi-phase form with field populated by jQuery

Ensuring Proper Alignment of Headers in CSS

The shared module for next/router is not found in the shared scope default within Next.js and @module-federation/nextjs-mf

Flexible columns with dynamic maximum width based on percentage