アニメもっと読む/少ないJQuery

Question

私は、より多くの/より少ないコードを読むためにアニメーションを追加したいと思います。 それは滑らかに開いています。

私のjQueryのコードは、現在、次のとおりです。

$(document).ready(function(){ 
    $('.service-info').hide(); 
     $('.read-more').click(function(){ 
      $(this).siblings('.service-info').show(); 
      $(this).hide(); 
      $(this).parent().find('.read-less').show(); 
     }) 
     $('.read-less').click(function(){ 
     $(this).siblings('.service-info').hide(); 
     $(this).hide(); 
     $(this).parent().find('.read-more').show(); 
     }) 
    }); 

JSFiddle：https://jsfiddle.net/2bdto5fb/

どのように私はそれを達成することができますか？

Answer 1

slideDown()とslideUp()を次のように使用します。

$(document).ready(function() { 
    $('.service-info').hide(); 
    $('.read-more').click(function() { 
     $(this).siblings('.service-info').slideDown('slow'); 
     $(this).hide(); 
     $(this).parent().find('.read-less').show(); 
    }) 
    $('.read-less').click(function() { 
     $(this).siblings('.service-info').slideUp('slow'); 
     $(this).hide(); 
     $(this).parent().find('.read-more').show(); 
    }) 
}); 

UPDATED FIDDLE

Answer 2

私の提案はslidetoggleを使用すると、コードを簡単にすることである。

$(function() { 
 
    $('.service-info').hide(); 
 
    $('.read-more, .read-less').click(function(e){ 
 
    $(this).hide(); 
 
    $(this).parent().find('.read-less, .service-info').slideToggle("slow"); 
 
    }) 
 
});

.read-less { 
 
    display: none; 
 
}

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 

 
<h2>Lorem ipsum</h2> 
 

 
<p class="intro"> 
 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis 
 
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, 
 
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, 
 
    vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede 
 
    mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. 
 
    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, 
 
    feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam 
 
    ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p> 
 

 
<a href="#" class="read-more">Read more</a> 
 

 
<div class="service-info"> 
 

 
    <h3>Lorem Ipsum</h3> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum 
 
     sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies 
 
     nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, 
 
     aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum 
 
     felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate 
 
     eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, 
 
     dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. 
 
     Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p> 
 

 
</div> 
 
<a href="#" class="read-less">Read less</a>