Comment ajouter un effet de fondu lorsque je clique sur développer sur ce script?

Question

J'ai trouvé ce contenu expand/collapse Plugin jQuery. Je veux ajouter un effet de fondu à ce plugin quand je clique sur le bouton EXPAND.

Comment faire?

$(document).ready(function() { 
var maxlines = 15; 
var lineheight = 15; // line height in 'px' 
var maxheight = (maxlines * lineheight); 
var allowedExtraLines = 3; 
var showText = "EXPAND"; 
var hideText = "CLOSE"; 
$('.ranking').each(function() { 
    var text = $(this); 
    if (text.height() > maxheight + allowedExtraLines * lineheight) { 
     text.css({ 'overflow': 'hidden', 'line-height': lineheight + 'px', 'height': maxheight + 'px' }); 
     var link = $('<a href="#">' + showText + '</a>'); 
     link.click(function (event) { 
      event.preventDefault(); 
      if (text.css('height') == 'auto') { 
       $(this).html(showText); 
       text.css('height', maxheight + 'px'); 
      } else { 
       //$(this).remove(); 
       $(this).html(hideText); 
       text.css('height', 'auto'); 
      } 
     }); 
     var linkDiv = $('<div></div>'); 
     linkDiv.append(link); 
     $(this).after(linkDiv); 
    } 
}); 

});

Answer 1

au sein de la fonction link.click, vous pouvez faire

text.animate({ opacity: 1.00 }, 600); 

je pense que ce serait aller après text.css ('hauteur', 'auto'); dans le bloc d'ailleurs. vous devrez probablement réinitialiser l'opacité à 0 d'une manière ou d'une autre dans le bloc if.

pour référence: http://api.jquery.com/animate/

modifier: mieux encore, http://api.jquery.com/fadeIn/

si

text.fadeIn();