Weiterlesen Animation/Transition

Question

Okay, ich weiß, dass es eine sehr einfache Lösung dafür gibt, aber im Moment habe ich keine Ideen. Ich habe ein Skript verwendet, um einen Lese-Button hinzuzufügen, wenn die Höhe des Div von 118 Pixeln zunimmt. Ich habe dieses JSFiddle Beispiel verwendet, jetzt muss ich eine einfache Folie und Folie schieben Animation hinzufügen. Kann mir bitte jemand sagen, wie man das macht?

JSFIDDLE EXAMPLE

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");  

};

Answer 1

Wenn Sie in der jQuery-UI-Bibliothek Sourcing sind, können Sie die Zeit in Millisekunden hinzufügen können, die Sie für die toggleClass Funktion als 2. Argument nehmen möchte.

.toggleClass("heightAuto", 1000); 

https://jqueryui.com/toggleClass/

Auch die Easing-Besuche, die Sie (zur Steuerung der Animation) als drittes Argument verwenden:

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

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

Answer 2

Sie könnten etwas Ähnliches tun:

$(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"); 
    }   
}; 

Nun beachtet, dass ich einige Änderungen vorgenommen:

1. Ich bin hoch zwischen maximal 80 bis 38 Pixel Animieren. Möglicherweise möchten Sie diese Werte abhängig von Ihrem bestimmten Textblock anpassen.
2. Ich verwendete animate, die einen zusätzlichen Geschwindigkeitsparameter enthält. Sie können das auch in einen Sekunden-Int-Wert ändern, wenn Sie mehr Kontrolle über den Effekt wünschen.

Siehe JSFiddle hier: http://jsfiddle.net/gqb8gsn4/1/