CODEWITHSUNDEEP
jqueryjquery-animatecss-transitions
Jimmy
Jimmy

Reputation: 285

css transition after jquery addclass

Im trying to slowly expand a div after i add the active class with jquery but i cannot get it to work properly. The div just gets the width but the transition doesnt occur. I have tried doing an animation with jquery also but that didnt work either.

$(document).ready(function() {
  $('.Sliders').click(function(e) {
    $(this).addClass('active').siblings().removeClass('active');
  });
});
#SliderHolder {
  width: 100%;
  height: 100%;
  font-size: 0px;
  position: relative;
  display: table;
  border-collapse: collapse;
}

.Sliders {
  min-width: 50px;
  height: 100%;
  display: table-cell;
  box-sizing: border-box;
  vertical-align: top;
  font-size: 72px;
  text-align: center;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

.active {
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Wrapper">
  <div id="SliderHolder">
    <div id="Slide1" class="Sliders active"></div>
    <div id="Slide2" class="Sliders"></div>
    <div id="Slide3" class="Sliders"></div>
    <div id="Slide4" class="Sliders"></div>
  </div>
</div>

Upvotes: 1

Views: 2117

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

you can add width : 0%; to .Sliders style and add transition to .active class

$(document).ready(function() {
  $('.Sliders').click(function(e) {
    $(this).addClass('active').siblings().removeClass('active');
  });
});
#SliderHolder {
  width: 100%;
  height: 100%;
  font-size: 0px;
  position: relative;
  display: table;
  border-collapse: collapse;
}

.Sliders {
  width : 0%;
  min-width: 50px;
  height: 100%;
  display: table-cell;
  box-sizing: border-box;
  vertical-align: top;
  font-size: 72px;
  text-align: center;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

.active {
  width: 100%;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
  background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Wrapper">
  <div id="SliderHolder">
    <div id="Slide1" class="Sliders active">1</div>
    <div id="Slide2" class="Sliders">2</div>
    <div id="Slide3" class="Sliders">3</div>
    <div id="Slide4" class="Sliders">4</div>
  </div>
</div>

Upvotes: 2

Related Questions