Tenho um formulário que, além de enviar um email em submit, deve executar certo script exibindo uma imagem de agradecimento.
A idéia é a seguinte: a imagem sobe, como um slide, e fica alguns segundos na tela. Após esses segundos de execução a imagem desce, também como slide. A imagem deve cobrir o formulário.
Consegui que a imagem subisse como slide e cobrisse o formulário. Porém testei algumas formas para que o slide permanecesse por 10 segundos e após isso descesse como slide, sem sucesso. A propriedade overflow também não funcionou muito bem, então a imagem aparece na tela mesmo fora do quadro. Uso o Jquery 1.2.6 min para o efeito.
Ainda não testei dentro do formulário, portanto não sei se há possibilidades de haver conflito com o script de validação do mesmo (a validação e envio de email já funcionam sem problemas). E na página que se encontra o formulário há outro efeito sendo executado em Prototype+Scriptaculous, a propriedade noconflict já é suficiente para um não interferir no outro?
Pergunta
Denise DR
Boa tarde,
Tenho um formulário que, além de enviar um email em submit, deve executar certo script exibindo uma imagem de agradecimento.
A idéia é a seguinte: a imagem sobe, como um slide, e fica alguns segundos na tela. Após esses segundos de execução a imagem desce, também como slide. A imagem deve cobrir o formulário.
Consegui que a imagem subisse como slide e cobrisse o formulário. Porém testei algumas formas para que o slide permanecesse por 10 segundos e após isso descesse como slide, sem sucesso. A propriedade overflow também não funcionou muito bem, então a imagem aparece na tela mesmo fora do quadro. Uso o Jquery 1.2.6 min para o efeito.
Ainda não testei dentro do formulário, portanto não sei se há possibilidades de haver conflito com o script de validação do mesmo (a validação e envio de email já funcionam sem problemas). E na página que se encontra o formulário há outro efeito sendo executado em Prototype+Scriptaculous, a propriedade noconflict já é suficiente para um não interferir no outro?
Aqui vai o código da minha versão de testes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery Slider Menu</title> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <style type="text/css"> body { margin: 0; } #sliderWrap { margin: 0; width: 342px; height:364px; overflow:hidden; border:5px solid #000; } #slider { position: absolute; background-image:url(slider.png); background-repeat:no-repeat; background-position: bottom; width: 342px; height: 364px; margin-top: 364px; overflow:hidden; } #slider img { border: 0; } a.topMenuAction{ position:absolute; color:#0F0; } #openCloseIdentifier{ overflow:hidden;} </style> </head> <body> <script type="text/javascript"> $(document).ready(function() { $(".topMenuAction").click( function() { if ($("#openCloseIdentifier").is(":hidden")) { $("#slider").animate({ marginTop: "364px" }, 500 ); $("#openCloseIdentifier").show(); } else { $("#slider").animate({ marginTop: "0px" }, 500 ); $("#openCloseIdentifier").hide(); } }); }); </script> <div id="sliderWrap"> <a href="#" class="topMenuAction"> Submit </a> <div id="openCloseIdentifier"></div> <div id="slider"> </div> </div> </body> </html>E aqui vai o link para download de todos os arquivos com os quais estou trabalhando: submit.zip
Link para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.