How to make a smooth transition for css controlled by jQuery?

Question

Hello I have a div I want to center controlled by jQuery. I would like to move the div to the center of the page on click. To do this I set up a jQuery function to affect the positioning through css. It works, but its not transitioning smoothly, it happens instantly even if I add the css transitions. Below is my code I have so far

Here is the css:

.footer-active-line {
    height: 10px;
    width: 33.3333333333%;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

Here is the jQuery:

jQuery(".footer-locations-box2").click(function(){
    jQuery(".footer-active-line").css({ 'right': '0px', 'left': '0', 'margin': '0 auto' })        
});

This code works, the div gets centered but the transition isnt kicking in. Does anyone know a way to make the transition smooth?

Thanks!

What it looks like you're trying to do is transition the margin property from 0 to auto (that's what makes it centered), but CSS transitions are limited and can't transition to or from auto. What you are trying to do is not possible with the current state of CSS. You could try transition transform:translateX() instead, but it would take some calculating of the percentages. — Joseph Marikle
– Joseph Marikle, Commented Oct 4, 2016 at 17:54
I suppose jQuery(".footer-active-line").css({ margin: '0 33.33333%' }); would work too. You're width is 33%, margin: 0 auto will result in about 33% on either side. — Joseph Marikle
– Joseph Marikle, Commented Oct 4, 2016 at 18:00
you are correct! the margin auto was preventing the transition. i changed it to 33.33333 percent and it worked! thank you. I will give you reputation and accept your answer if you post an answer — cup_of
– cup_of, Commented Oct 4, 2016 at 18:02
Sorry, just saw your comment. I was in the process of writing it as an answer. — Joseph Marikle
– Joseph Marikle, Commented Oct 4, 2016 at 18:07

Joseph Marikle · Accepted Answer · 2016-10-04 18:06:55Z

As I mentioned in my comment, CSS transitions don't work for a destination or start value of auto. It must be in some way numeric. That being said, you're using margin: 0 auto because it automatically adjusts the margins, which creates the illusion of centering. Basically the browser is setting the same margin on both sides to fit the container. The catch is that you already know what that destination margin will be. Your .footer-active-line is set to be 1/3 the width of the container with that width: 33.3333333333%;. You could either use transform (which is relative to the width of the element it's applied to) at 100% or you can set the margin to 33%, which is relative to the offset parent.

Here's method one:

jQuery(".footer-locations-box2").click(function(){
    jQuery(".footer-active-line").css({ transform: 'translateX(100%)' });       
});

.footer-active-line {
    background: red;
  
    height: 10px;
    width: 33.3333333333%;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer-active-line">
</div>

<button class="footer-locations-box2">transition</button>

Here's method two:

jQuery(".footer-locations-box2").click(function(){
    jQuery(".footer-active-line").css({ margin: '0 33.33333%' });       
});

.footer-active-line {
    background: red;
  
    height: 10px;
    width: 33.3333333333%;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer-active-line">
</div>

<button class="footer-locations-box2">transition</button>

Harvey A. Ramer · Accepted Answer · 2016-10-04 17:56:54Z

0

Your click event is likely disrupting your animation. Try this change to your handler

    jQuery(".footer-locations-box2").click(function(e){
        e.preventDefault();
        jQuery(".footer-active-line").css({ 'right': '0px', 'left': '0', 'margin': '0 auto' })        
    });

answered Oct 4, 2016 at 17:56

Harvey A. Ramer

7827 silver badges15 bronze badges

2 Comments

cup_of Over a year ago

unfortunately that did not work sir, thank you for your answer though

Harvey A. Ramer Over a year ago

I'm guessing if you follow the second comment above from @Josephe Marikle along with using preventDefault you'll be closer to a solution.

Collectives™ on Stack Overflow

How to make a smooth transition for css controlled by jQuery?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related