Cambio de clase de div separado con enlace

Primero necesito agregar el .light clase de #banner cuando se carga la página, luego cuando #change se hace clic, me gustaría desvanecer la clase de .light a .dark

<style type="text/css>
  #banner { width: 1000px; height: 500px; }
  .light { background: url(light.jpg) #ffffff; }
  .dark { background: url(dark.jpg) #000000; }
</style>

<script type="text/javascript">
  // no idea what to do
</script>

<div id="banner">
  stuff
</div>

<div id="container">
  <div id="leftCol">
    <a href="#" id="change">Change</a>
  </div>
</div>

preguntado el 22 de mayo de 12 a las 18:05

4 Respuestas

Resuelto.

Demo en vivo: http://jsfiddle.net/oscarj24/Yh7pE/9/

$(function(){
  $("#banner").addClass("light");
  $("#change").on("click", function(e){
    $("#banner").toggleClass("light").hide().toggleClass("dark").fadeIn();
    e.preventDefault();
  });
});​

CSS:

  .light { 
        background: url(http://oursaviorschurch.com/img/bg_banner.jpg) #ffffff; 
        opacity: 0.30; /* FX, Safari, GC, Opera, decent browsers */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /* IE8 */
        filter: alpha(opacity=30); /* IE */
        /* in Safari, FX and Chrome add a fade transition */
        -webkit-transition: opacity .25s linear .1s;
        transition: opacity .25s linear .1s;  
    }

    .dark { 
        background: url(http://oursaviorschurch.com/img/bg_banner_dark.jpg) #000000;  
        opacity: 1; /* FX, Safari, GC, Opera, decent browsers */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
        filter: alpha(opacity=100); /* IE */
    }​

contestado el 22 de mayo de 12 a las 19:05

jsfiddle.net/Yh7pE/2 actualizado para volver a cambiar en otro clic, no estoy seguro si esto es lo que se desea - Steve

¿Cómo haría para desvanecer la transición? - tstrebeck

Entonces mi problema es que cuando uso una imagen, la imagen no se desvanece. solo el color ¿Cómo puedo hacer que la imagen se desvanezca? La imagen es sólo una transición difícil. - tstrebeck

¿Tienes el enlace público para las imágenes? - Óscar Jara

$(function() {
  $('#banner').addClass('light');
  $('a#change').on('click', function(e) {
    e.preventDefault();
    $('#banner').removeClass('light').addClass('dark');
  });
})

contestado el 22 de mayo de 12 a las 18:05

Quieres animar clases. ¿derecho? aquí hay un código simple con demostración en vivo

$(document).ready(function(){
  $("#banner").addClass("light");
  $("#change").click(function(){
    $("#banner").stop(0,0).addClass("dark",800).removeClass("light",800);   
  });
});

Un ejemplo de trabajo está aquí http://jsfiddle.net/8nrzh/

contestado el 22 de mayo de 12 a las 18:05

@tstrebeck, puede cambiar el tiempo de animación de 800 milisegundos a lo que desee: Soy papá

Para el desvanecimiento, deberá hacer referencia jQuery UI en tu <head>:

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/jquery-ui.min.js">
</script>

Y luego por el resto:

// Wait until the document is ready before proceeding
$(function(){

  // Cache a reference to the banner to jQuery doesn't have to find it again
  var $banner = $("#banner");    

  // Immediately add the 'light' class
  $banner.addClass("light");

  // When #change is clicked, swap the classes on #banner
  $("#change").on("click", function(e){

    // Prevent the link from changing the page
    e.preventDefault();

    // Remove 'light', and add 'dark'
    $banner.addClass("dark", 1000).removeClass("light");

  });

});​

contestado el 22 de mayo de 12 a las 19:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.