Estoy haciendo un div que se mostraría al hacer clic en el botón y se ocultaría al hacer clic nuevamente. Estoy usando la función toggleClass de jquery. El problema es que necesito animación mientras el div se abre y se cierra. He probado la transición: 1, en todas las clases relevantes e incluso en el cuerpo, pero fue en vano. Este es el violín: http://jsfiddle.net/9dq2p7dw/105/
Aquí está el código para mi jquery:
$(document).ready(function(){ $(".view").click(function(){ $(".view-more").toggleClass("hide show", 500); }); });Puedes usar .fadeToggle
$(document).ready(function(){ $(".view").click(function(){ $(".view-more").fadeToggle( "hide show", "linear" ); }); }); .hide{ display:none; } .show{ display:block } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="view">View All</a> <div class="view-more hide" > <div class="col-md-6"> <h1> asasasas </h1> </div> <div class="col-md-6"> <h1> sasasas </h1> </div> </div>transition: all 0.3s ease;
Referir transiciones CSS
$(document).ready(function() { $(".view").click(function() { $(".view-more").toggleClass("hide show", 500); }); }); .hide { opacity: 0; transition: all 1s ease; } .show { opacity: 1; transition: all 1s ease; } .view-more{ background-color:#F0C798; padding:10px; box-sizing:border-box; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="view">View All</a> <div class="view-more hide"> <div class="col-md-6"> <h1> asasasas </h1> </div> <div class="col-md-6"> <h1> sasasas </h1> </div> </div>Si todo lo que desea hacer es ocultar y mostrar un div al hacer clic en un botón, puede hacerlo de una manera más sencilla.
$(".view").click(function(){ $(".view-more").toggle(function() { $(this).animate({height: '200'}); }, function() { $(this).animate({height: '100'}); }); });Cuando se le da una lista de funciones como argumentos, el método .toggle(fn1, fn2) alternará entre las funciones dadas comenzando con la primera. Esto realiza un seguimiento automático del estado de alternancia por usted; no tiene que hacerlo.
jQuery doc está aquí . Existen múltiples formas de .toggle() según los argumentos utilizados, por lo que no siempre encontrará la correcta al buscar en el documento de jQuery.