I come to bother you I have the following animation that disappears in x
seconds, but the closing is not being validated [x] I want to give the possibility of closing the message manually, but it is not working for me.
$(document).ready(function() {
$('.response').fadeIn(500).delay(6000).fadeOut(500);
$(".dismiss").click(function(){
$(".response").fadeOut(500);
});
});
.response {
display: none;
opacity: 0.9;
position: absolute;
bottom: 15px;
left: 15px;
margin: 0;
padding: 0;
width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="response">
<span class="dismiss">X</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non.</p>
</div>
The error
By adapting the animation to the response of AJAX
as follows div
, the animation is executed automatically when you refresh the page or open the page directly and you should not do so because it should be executed only if a request or response is received through ofajax
Example:
This is my
AJAX
taking examples in the following endeos source
$(document).ready(function() {
$('.response').fadeIn(500).delay(6000).fadeOut(500);
$(".dismiss").click(function(){
$(".response").fadeOut(500);
});
});
$(document).ready(function() {
$(document).on('submit', '#post', function() {
var data = $(this).serialize();
$.ajax({
type : 'POST',
url : 'post.php',
data : data,
success : function(data) {
$(".response").html(data);
}
});
return false;
});
});
and i get response
<div class="response"><!-- Respuesta AJAX --></div>';
Try this:
Inside the tag
a
add the attributehref="#"
Also when executing the click event on the div, you can hide the span like this:
When you cast
delay
on an element, it affects its entire animation queue. ThefadeOut
one that you try to call manually with the X does not execute immediately but enters the queue that is waiting for the delay term.The best thing would be to be able to cancel the delay when you press X and interrupt that waiting period... the bad thing is that
delay
it cannot be canceled according to the documentation :For the same, let's pay attention to the documentation and use
setTimeout
to achieve the desired behavior:For your use case, it would be better to put the entire animation inside the response to the post, because otherwise it seems that you are assuming that the response will take at most 6 seconds. If it takes 10 seconds, you
fadeOut
will prevent anything from being displayed.Second, if you put the answer in the X
$('.response')
will disappear and you will no longer be able to hide the div. It would be better if the answer was in the child of .p
$('.response')
I would apply the
fadeIn
just before triggering the request, taking advantage of modifying the message it contains:And by the way, I would contemplate the case that the request returned an error.
EDIT : I tried to apply the answer to your example in Ajax. Since I don't know if the original question and the actual situation have the same structure, I ended up missing the fact that filling the DIV with the answer is going to overwrite the X.