Como para obter efeitos jQuery trabalhando no Firefox e Google Chrome?
-
19-08-2019 - |
Pergunta
Eu estou bisbilhotando com jQuery e os efeitos FadeIn & fadeOut. Eu tenho o seguinte código para mostrar e ocultar uma div com uma mensagem.
`
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("#upd").fadeIn(3000);
$("#upd").fadeOut(20000);
});
});
</script>
<style type="text/css">
div
{
background: rgb(237, 243, 254);
margin: 0px 0px 5px 0px;
padding: 13px 30px 13px 30px;
width: 300px;
}
</style>
`
Ele funciona perfeitamente no Internet Explorer, mas não faz nada em cromo e fico show e esconder comportamento no Firefox.
Existe uma etapa especial para esta biblioteca para o trabalho uniformemente ou pelo menos perto em todos os navegadores?
Solução
Tente fadeOut do retorno de chamada de fadeIn . Isso irá garantir que este último efeito é ran uma vez que o primeiro é completado, e não durante a:
$(document).ready(function(){
$("button").click(function(){
$("#upd").fadeIn(3000,function(){
$(this).fadeOut(2500);
});
});
});
jQuery deve trabalho quase o mesmo em todos os navegadores por si só. Se você está recebendo um comportamento estranho, você provavelmente está fazendo algo errado - não jQuery:)
Outras dicas
One, verifique se você está usando a mais recente jQuery, e que o Javascript está habilitado em todos os seus browsers.
Em segundo lugar, tentar acorrentar o fadeIn
e fadeOut
convoca:
$("button").click(function() {
$("#upd")
.fadeIn(3000)
.fadeOut(20000);
});
Aqui está o problema: $ ( "Botão")
Não há nenhum elemento como botão, se for uma classe, em seguida: $ ( 'Botão')
... e se é um id então: $ ( 'Botão #')