-1

I am animating different divs (jQuery and jQuery UI), so I have created classes like ,slidein, fadein, etc., and I can apply them to whatever I need to animate. In my Javascript file, a .each() loop is run to find every element with a class of fadein or sidein

What I want to do is be able to choose how long the animation takes, by adding a class of fadein-x, where x is the number of milliseconds it took. For instance:

.fadein-500 - Element will take 500 milliseconds to fade in

.slidein-1000 - Element will take 1000 milliseconds to slide in

Using a .each() function I can loop through the elements with a specific class, but could I loop through all the elements with a class that starts with a specific string, like a wildcard? Maybe something like this (where * is the wildcard):

$('.fadein-*').each(...)

The above would select all elements with the fadein- class, and then I could slice the class to get the time, and apply the animation.

So, in conclusion, this is what I want:

Be able to animate elements with a customizable time, without having to change a Javascript file

If there is another way to do what I am trying to do, please tell me! Thanks

Note: The reason I need this is because I am creating a Wordpress theme, and I will be using PHP to echo a time the user types in. Obviously I don't want to create 3000 different classes for every time in milliseconds possible

Also, this question is not the same, the OP was asking about something different

Community
  • 1
  • 1
Kaspar Lee
  • 5,446
  • 4
  • 31
  • 54
  • Possible duplicate of [jQuery - has class that starts with](http://stackoverflow.com/questions/8579108/jquery-has-class-that-starts-with) – falsarella Dec 18 '15 at 16:29

2 Answers2

5

I'd suggest using data attributes:

$('.fadein').each(function() {
  var duration = $(this).data('duration') ? $(this).data('duration') : 500; // a sane default
  $(this).fadeIn(duration);
});
<p class="fadein" data-duration="1500">1500 ms!</p>
Andrew
  • 1,203
  • 8
  • 12
  • @Druzion The other answers skipped the part where you split the className (esp. the case of multiple names) to figure out how long do you do the animation :) – Andrew Dec 18 '15 at 16:26
  • I'm with andr. This is semantically more consistent; classes should not have meaning in a "part" of their string, they should be individual identifiers. I don't want it to try processing `uiPanelControlFadeInUserHomepage` – Katana314 Dec 18 '15 at 16:28
  • @andr Yes, that is a fair point. The only reason I like the others more is that they are shorter – Kaspar Lee Dec 18 '15 at 16:29
  • I'm curious how short could you make the string splitting part. Yet I think you shouldn't. – Andrew Dec 18 '15 at 16:32
  • @andr Actually, thinking about it, this makes more sense to solve my problem (Since I also need to do certain things to all animated elements). – Kaspar Lee Dec 18 '15 at 16:43
2

This should select where class starts with fade-in 

$("[class^='fadein-']").each(...)

I don't think there is a way to do it with the class selector so have to do attribute starts with and use the class attribute. As pointed out in the comments this would only work if the first class is fadein- to work with another class before it then you will have to use contains, as shown in the other answer.

$("[class*='fadein-']").each(...)
Dhunt
  • 1,584
  • 9
  • 22