Arno Lorentz Arno Lorentz - 1 year ago 46
CSS Question

Dynamic CSS with jQuery?

I've created a custom dropdown element.

The number of options it can have is based on a Database Table (I haven't created the Table yet). Like the number of options can be 4 or even 5 or anything for that matter.

I'll use PHP to give the number of options for the dropdown. Each of the options are in an

tag. The
siblings are inside the

I have a CSS file which animates the
items. But instead of animating them all at once (in which case I would just animate the
and would get the same effect), what I want to do is to animate them one by one:

will have a delay which is progressive. For example if the first
has a
delay and a duration of
then the second will start when the first ends, that is the second
will have a delay of
with the same duration. The duration remains the same, just the
changes so as to give it a follow-the-previous kind of effect.

Since I don't know the number of options in the dropdown, how am I gonna do the same? I'm assuming it would require calculations but since CSS doesn't support it, there is no way to do it using native CSS.

My best guess is to use jQuery. Am I correct?

Answer Source

I'm not sure if you want jquery, but I know how to solve this problem using jQuery. This essentially adds a delay of 300ms per iteration over your options list that you fetch from the database after appending them to the parent list.

<script type='text/javascript'>
    var items = ['a', 'b', 'c', 'd', 'e']; //Whatever you fetch from the database
    for(var i =0; i<items.length; i++) {
     var new_item = $('<p>'+items[i]+'</p>').hide();
      $('#test').append(new_item); //Here test is the id of the unordered list.

And you need to include this in your HTML -

<ul id="test">

Don't forget to include jQuery!