Question

In order to create some swooshey menus, I’m trying to set the CSS transition property on <li> elements using jQuery. The HTML looks like this:

<ul class="main-nav">
  <li>
    <a href="#">Top Level 1</a>
    <ul class="main-nav-child">
      <li><a href="#">Second Level 1</a></li>
      <li><a href="#">Second Level 2</a></li>
      <li><a href="#">Second Level 3</a></li>
      <li><a href="#">Second Level 4</a></li>
      <li><a href="#">Second Level 5</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Top Level 2</a>
    <ul class="main-nav-child">
      ...
    </ul
  </li>
</ul>

I’m trying to apply a transition of "transform 0.3s ease-in-out XXXXs, padding-left 0.1s ease" to each of the elements in .main-nav-child, where XXX increases for each item in the menu.

I’m using an .each() loop to iterate over each Top Level list item, and then another one inside that to iterate over the items in the inner list. I’m then trying to set the transitions with javascript:

$('.main-nav > li').each(function(i, child) {
  $(child).find(".main-nav-child li").each(function(j, c) {
    c.style.WebkitTransition = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
    c.style.MozTransition    = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
    c.style.MsTransition     = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
    c.style.OTransition      = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
    c.style.transition       = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease"
  });
});

Having read this, I tried using jQuery’s .css method:

$('.main-nav > li').each(function(i, child) {
  $(child).find(".main-nav-child li").each(function(j, c) {
    $(c).css({
      WebkitTransition : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
      MozTransition    : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
      MsTransition     : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
      OTransition      : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
      transition       : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease"
    });
  });
});

I’ve also tried using CSS-style, rather than DOM, style property names:

$('.main-nav > li').each(function(i, child) {
  $(child).find(".main-nav-child li").each(function(j, c) {
    $(c).css("-webkit-transition", "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease");
  });
});

The Problem

The loops seem to work fine, and after much fiddling with Chrome’s web inspector, it seems that when I try to set c.style.WebkitTransition to something, it works, but the property isn’t stored. It does the same in the console (se here: http://cl.ly/Lbau)

I’m been playing around with this for the better part of half a day, so if anyone can help me out I’d be most appreciative!

Cheers.

Answer 1

Transform isn’t a supported animation property yet. Source

Take out the transform setting and it should set just fine.