javascript, css transition functions

Question

I have these buttons in html:

<a href="#" onClick="slideHome('EntireSite');">Home</a>
<a  href="#" onClick="slideAbout('EntireSite');">About Me</a>
<a href="#" onClick="slidePorto('EntireSite');">Portofolio</a>

As you see, these buttons call functions

functions:

<script>
function slideHome(el){
var elem = document.getElementById(el);
elem.style.transition = "left 0.5s ease-in-out 0s";
elem.style.left = "0px";    
}


function slideAbout(el){
var elem = document.getElementById(el);
elem.style.transition = "left 0.5s ease-in-out 0s";
elem.style.left = "1100px";

}

these 2 work perfectly fine, but now the last function:

function slidePorto(el){
var elem = document.getElementById(el);
elem.style.transition = "top 0.5s ease-in-out 0s";
elem.style.top = "-400px";
elem.style.transition = "left 0.5s ease-in-out 1s";
elem.style.left = "1300px";     
}
</script>

This function needs to move down and to the left, as a result, the "slideHome" function get's a extra line of code to move it back as well.

The problem is, that in the "slidePorto"function, it skips the first transition, it moves, but not smoothly, so it quickly moves to the bottum, and then the transition to the left fires. Same problem for the "slideHome" function when I want to move back to top:0px;

How do I get these to transitions together? Thanks in advance!

not that experienced with JSFiddle, but here is a link, doesn't work at all in here. [link] jsfiddle.net/89WCd/1 — CularBytes
– CularBytes, Commented Jul 10, 2014 at 11:23
Here is the link I got this code from: [link]developphp.com/view.php?tid=1330[/link] — CularBytes
– CularBytes, Commented Jul 10, 2014 at 11:29

Nicolas Henrard · Accepted Answer · 2014-07-10 11:56:28Z

1

You can specify multiple transitions on an element before trigerring them by the script.

This code specifies the transitions, then do the "top" part and after that ended the transition by the "left" transition part.

function slidePorto(el) {
    var elem = document.getElementById(el);
    elem.style.transition = "top 0.5s ease-in-out 0s,left 0.5s ease-in-out 1s";
    elem.style.top = "-400px";
    elem.style.left = "1300px";
}

NB: I don't understand why you specify -400px, but it works for every value you desire.

answered Jul 10, 2014 at 11:56

Nicolas Henrard

8431 gold badge8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CularBytes Over a year ago

Thanks, was trying to put elem.style.transition in one line, didn't try that one, thanks, it works! -400px because this makes the div move up, showing content below. Thanks!

Collectives™ on Stack Overflow

javascript, css transition functions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related