Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

girotto000

Adicionar efeito fadein no código abaixo

Por , em Javascript

Recommended Posts

girotto000    0

girotto000
Postado

Boa tarde.

Alguém que manja dos javascript, poderia fazer com que o código abaixo mostra a div com o efeito fadein? Estou tentando a bastante tempo e não consigo...

 

 

<script>
  var clip = new ZeroClipboard( 
  document.getElementById('clip_copy'), {
  moviePath: 'js/ZeroClipboard.swf'
});
clip.on( 'load', function(client) {
  // alert( 'movie is loaded' );
  clip.on( 'complete', function(client, args) {
    // `this` is the element that was clicked
    document.getElementById('codigocopiado').innerHTML = 'Código copiado com sucesso!';
  } );
} );
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

exemplo:

$(function(){ // $(document).ready shorthand
$('#sua_div').fadeIn('slow');
});

Se o seu div não é inicialmente oculto, você pode escondê-lo antes da animação:

$('#sua_div').hide().fadeIn('slow');

O parâmetro de velocidade pode ser 'slow', 'normal', 'fast'
ou o número de milissegundos para executar a animação.

Compartilhar este post

Link para o post
Compartilhar em outros sites

girotto000    0

girotto000
Postado

Então xand, eu fiz o seguinte:

 

 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$("#botao").click(function(){ 
$("#minhaDiv").fadeIn("slow");
});
</script>
 
<script>
  var clip = new ZeroClipboard( 
  document.getElementById('clip_copy'), {
  moviePath: 'js/ZeroClipboard.swf'
});
clip.on( 'load', function(client) {
// alert( 'movie is loaded' );
clip.on( 'complete', function(client, args) {
    // `this` is the element that was clicked
    document.getElementById('codigocopiado').innerHTML = 'Código copiado com sucesso!';
  } );
} );
</script>

 

Você tem ideia do porque estar dando errado? O efeito não acontece..

Compartilhar este post

Link para o post
Compartilhar em outros sites

girotto000    0

girotto000
Postado

Cara, o código é bem simples de se entender:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

O script foi chamado corretamente, o problema é na execução. Acho que está havendo conflito entre os dois..

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

em um HTML assim:

<DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(function(){
        //conteúdo das listagens
    });
    </script>
</head>
<body>
    <button id="btnTeste">Clique aqui</button>
    <div id="minhaDiv" style="height:100px; width:100px; background:green"/>
<body>
</html>

 

 

jquery

 

$("#minhaDiv").hide();
$("#btnTeste").click(function(){           
    //Sem parâmetros: o efeito é executado em 400ms
    $("#minhaDiv").fadeIn();
    //Parâmetro com a duração em ms do efeito
    $("#minhaDiv").fadeIn(1000);
    //Parâmetro slow: o efeito é executado em 600ms
    $("#minhaDiv").fadeIn("slow");
    //Parâmetro fast: o efeito é executado em 200ms
    $("#minhaDiv").fadeIn("fast");
    //Informada duração e função de callback
    $("#minhaDiv").fadeIn("fast",
        function(){
            alert("fade concluido");
        }
    );
});

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito