Search code examples
javascriptjqueryhidelive

Wait for javascript to show an element to hide it afterwards

Hi I have a JQuery js that does something like this after AJAX call:

$element.next().after('<td><b>OPTION SAVED</b></td>');
$element.next().next().hide();
$element.next().next().show('slide', {direction : 'left'}, 1000);

Now what I want to do is call this => 

$element.next().next().next().hide("slow");

So basically I want to create an element dynamically, slide it from the left and after it has appeared, I want it to hide it slowly again. How do I do this? My problem is that js code is executed even while the element has not yet completed the sliding (or its creation maybe?) so When I call hide("slow") it tells me I called it on undefined and nothing happens...

Thanks

Solution 
  • $element.next().after('<td><b>OPTION SAVED</b></td>').hide().show('slide', {direction : 'left'}, 1000, function(){$(this).hide();});

    Should work, the chaining of the calls means the after will return the element you just added then you show it and add a callback function to hide it again.