.content가 크로스페이드로 트랜지션 되면서 나타나고 사라지게 하기

.testimonial {

  position: relative; /* .content의 부모요소로 확정 */

  min-height: 230px; /* .content가 absolute되면서 잃어 버린 높이값 찾아주기 */

}

.testimonial .content {

  position: absolute; /* .content 들을 부모요소(.testimonial)의 왼쪽 상단으로 위치하기 */

}

<script>
    $('.testimonial-pic img').click(function(){

      $(this).addClass('active')

      $(this).siblings().removeClass('active')



      $('.testimonial .content').fadeOut() /* .content 나타날 때 다른 .content 서서히 사라지기 */

      $('#' + $(this).attr('data-alt')).fadeIn() /* .content 나타날 때 서서히 보이기 */


    })
 </script>

주요 JQUERY 속성

• addClass()
• siblings()
• removeClass()
• attr()
• 사용자정의 속성 data-alt