jQuery addClass example

Change class name on click in jQuery

by Kunal Virk

HTML

<div class="wrapper">
  <div class="ts-holder">
    <div class="ts-wrapper">
      <p class="ts-re ts-active">
        You may pass in an options object to the plugin upon initialization
      </p>
      <p class="ts-re">
        This object may contain any of the following properties
      </p>
      <p class="ts-re">
        By default current row shows on the bottom
      </p>
      <p class="ts-re">
        Set to true to show it in the center
      </p>
      <p class="ts-re">
        Note that this method currently does not provide cross-platform support for setting data
      </p>
      <p class="ts-re">
        Store arbitrary data associated with the matched elements
      </p>
    </div>
  </div>
</div>

CSS

body {font-family:'Arial', sans-serif;}
.wrapper {width:600px; margin:0 auto;}
.ts-holder {overflow: hidden; background-color: #333;}
.ts-wrapper {background-color:#333; padding:0 40px; color:#fff;transition:all 0.5s ease-in-out;}
.ts-re {transition:all 0.5s ease-in-out;transform-origin: 0 50%;font-size: 24px; margin: 0; padding: 20px 0;}
.ts-active {transform: scale(1.15);font-weight:bold;}

JavaScript

$(document).ready(function(e) {

    var subWrapper = $(".ts-holder"),
        subHolder = $(".ts-wrapper"),
        subtitles = $(".ts-wrapper p"),
        slidesToShow = 3,
        holderHeight = 0,
        totalHeight = 0,
        delay = 2000,
        transitionDelay = 150,
        timeoutHolder,
        intervalHolder;

        
        // Set holder to height to show specific numbers of slide
        $(subtitles).each(function(i, el) {
            if (i < slidesToShow) {
                holderHeight += $(el).outerHeight(true);
            }
            totalHeight += $(el).outerHeight(true);
        });

        $(subHolder).height(totalHeight);
        $(subWrapper).height(holderHeight);

        for(var i = 0; i < subtitles.length; i++) {
            $(subtitles[i]).css({
                "transition-duration" : transitionDelay + "ms"
            });
            transitionDelay = transitionDelay + 100;
        }
        
        function doScroll() {
            var tempHeight = 0;
            $(subtitles).each(function(index, el) {
                
                tempHeight = $(el).prev().length > 0 ? $(el).prev().outerHeight(true) : $(el).outerHeight(true); 

                console.log("TempHeight", tempHeight);             
                $(el).css({
                    "transform" : "matrix(1,0,0,1,0, -"+ tempHeight +")"
                });
            });
        }

        
       setInterval(function() {
            doScroll();
         }, delay);

});