ejemplos - jquery fadeto

jquery fadeIn no funciona

Question

¿Puede alguien decirme qué estoy haciendo mal?

estilo:

.warning{border: 1px solid #F0AAAA; background:#FFBABA; color: #C90000;}

margen:

 <p class="warning">A successful authorization already exists. 
                    Further authorizations are not allowed at this time.</p>

guión:

 $().ready(function () {
     alert($(".warning").html());     // WORKS
     $(".warning").fadeIn(4000);      // DOESN''T WORK
 });

Answer 1

A menos que el elemento esté oculto, no se producirá ningún fundido, necesita algo como esto:

$(".warning").hide().fadeIn(4000);

Puede intentarlo aquí , también $() está en desuso en 1.4+, debe usar $(document) o la versión más corta, como esta:

$(function() {
  $(".warning").hide().fadeIn(4000);
});

La alternativa es darle al elemento una display: none inicialmente, pero esto se rompe para los usuarios con discapacidad JS, o si se producen errores de JavaScript que impiden el fundido, por lo que es posible que desee alejarse de este enfoque.

Answer 2

Recientemente he hecho lo mismo en mi aplicación. En la parte superior de mi documento html tengo:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="advtemp3jquery.js"></script>

La parte que dice src="advtemp3jquery.js refiere a mi archivo externo .js . Me parece más útil mantener el código en un archivo externo.

El script hace lo siguiente:

$(document).ready(function() {
    $(''.header1,.header2'').fadeIn(''4000'');
});

Answer 3

Yo tendería a pensar que quieres que algún evento sea administrado para el fadin. ver ejemplo de trabajo aquí: http://jsfiddle.net/hPHPn/

Así:

$(document).ready(function(){
    $(".warning").hide();// hide it initially
    $(''#unhideit'').click(function(){
        $(".warning").fadeIn(4000);                            });
});

para algunas marcas simples:

<p class="warning">A successful authorization already exists  
    for this Quote ID. Further authorizations are not allowed at this time.</p> 
<input type="button" id="unhideit" value="clickme" />

Answer 4

agregar display:none a su código CSS.

.warning{border: 1px solid #F0AAAA; background:#FFBABA; color: #C90000;display:none}