CODEWITHSUNDEEP
jqueryhtmlcsscss-transitions
Zain Sohail
Zain Sohail

Reputation: 464

Read More Animation/Transition

Okay, so I know there is a very simple solution to this, but I am out of ideas at the moment. I used a script to add a read more button when ever the height of the div increases from 118 pixels. I used this JSFiddle example, now I need to add a simple slide down and slide up animation. Can someone please guide me how to get this done?

JSFIDDLE EXAMPLE

THE JS

if(curHeight==118) {
  $('#readmore').show();
} else {
  $('#readmore').hide();
}

// Find Div Height    
function changeheight() {

  var lang = jQuery('html')[0].lang;

  if ( lang == 'nl-NL' ) {
    var more_text = 'Lees meer';
    var less_text = 'Lees minder';
  } else if (lang == 'en-US' ) {
    var more_text = 'Read more';
    var less_text = 'Read less';
  }

  var readmore = jQuery('#readmore');
  if (readmore.text() == more_text) {
      jQuery('.readmore_link').addClass("show_less");
      jQuery('.readmore_link').removeClass("show_more");
      readmore.text(less_text);
  } else {
      jQuery('.readmore_link').addClass("show_more");
      jQuery('.readmore_link').removeClass("show_less");
      readmore.text(more_text);
  }    
  // fade out read-more
  jQuery('.rm_height').toggleClass("heightAuto");

};

Upvotes: 0

Views: 6134

Answers (2)

runningviolent
runningviolent

Reputation: 317

If you are sourcing in the jquery-ui library, you can add the time in milliseconds that you would like to take for the toggleClass function as the 2nd argument. 

.toggleClass("heightAuto", 1000);

https://jqueryui.com/toggleClass/

Also, check out the easings that you could use (to control the animation) as the 3rd argument:

.toggleClass("heightAuto", 1000, "easeOutSine" );

http://api.jqueryui.com/easings/

Upvotes: 1

Jose Cifuentes
Jose Cifuentes

Reputation: 596

You could do something similar to this:

$(function(){
     var curHeight = $('.text').height();     
     if(curHeight==38) {
        $('#readmore').show();
    } 
    else {
        $('#readmore').hide();
    }
});     

function changeheight() {
    var readmore = $('#readmore');
    if (readmore.text() == 'Read more') {
        readmore.text("Read less");
        $("#textbody").animate({maxHeight : '80px', height : '80px'},"slow");
    } else {
        readmore.text("Read more");
        $("#textbody").animate({maxHeight : '38px', height: '38px'},"slow");
    }           
};

Now, notice that I made some changes:

  1. I'm animating between a maximum of 80 to 38 pixels high. You might want to fine-tune these values depending on your specific block of text.
  2. I used animate, which includes an extra speed parameter. You can also change that to a seconds int value if you want more control of the effect.

See the JSFiddle here: http://jsfiddle.net/gqb8gsn4/1/

Upvotes: 2

Related Questions