CODEWITHSUNDEEP
javascriptjquerycss
Lieutenant Dan
Lieutenant Dan

Reputation: 8294

transition animation to text align: center

I'm using the below; but the margin isn't nearly as approximate as text-align:center; is there anyway I could toggle text-align: center; to occur with a animation transition until it gets to the point of text-align: center; similar to that which is achieved with the below.

if ($(".resource-section").hasClass("resource-section--expanded")) {
     $(".resources__header h2").animate({"marginLeft": "40%"}, "slow");
}

Upvotes: 0

Views: 4152

Answers (3)

vals
vals

Reputation: 64264

You can use a centering technique that allows you to horizontally center any element.

It can be animated using only CSS

.test {
  position: absolute;
  transform: translateX(0%);
  left: 0%;
  animation: center 2s infinite;
}

@keyframes center {
  0%, 10% {
      transform: translateX(0%);
      left: 0%; 
  }
  90%, 100% {
      transform: translateX(-50%);
      left: 50%; 
  }
}
<h1 class="test">TEST</h1>

Upvotes: 2

Nenad Vracar
Nenad Vracar

Reputation: 122155

You could animate center align using margin-left like this 

var h1 = $('h1').width();
var parent = $('.container').width();
$('h1').animate({'margin-left':(parent/2-h1/2)}, 1500);
.container {
  border: 1px solid black;
  height: 100px;
}

h1 {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1>Text</h1>
</div>

Upvotes: 1

Esteban Rincon
Esteban Rincon

Reputation: 2110

From what i understood if you want to use the text-align:center property something like this could be of help to you, but the text-align property can't be animated

$(function(){


  $('.resources_header h2').click(function(){
  
        $(this).toggleClass('align-center');
  
  });


});
.align-center{
 text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  
  <div class="resources_header">
    
    <h2>HEADER</h2>
    
  </div>  
</div>

A problem with this is the animation so if what you want to achieve is to animate from left to center then why not:

$(function(){

  $('.resources_header h2').click(function(){
    
    
    var windowHalfWidth = $(window).width()/2;
    $(this).css('position','absolute');
    
    var elemHalfWidth = $(this).width()/2;           
    var left = windowHalfWidth - elemHalfWidth;
      $(this).animate({
         marginLeft: left
      },"slow",function(){
              $(this).css('position','static');
      });
  
  });


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="resources_header">

    <h2>HEADER</h2>

  </div>
</div>

Upvotes: 0

Related Questions