how to target multiple items with the same jQuery Fade function?

Question

I have a jQuery fade function to hide and show reviews and their according authors.

First I had only the reviews fading in and out, but now I would like to the same with their authors.

Here's my function:

This is item two This is item three

    <div id="writtenby">
        <div class="authors" class="item1"><?php the_field('hwrittenby', 'option'); ?></div>
        <div class="authors" class="item2">This is item two</div>
        <div class="authors" class="item3">This is item three</div>
    </div>

    <?php add_action( 'wp_enqueue_script', 'load_jquery' );
        function load_jquery() {
            wp_enqueue_script( 'jquery' );
        } ?>

    <script type="text/javascript">
    jQuery(document).ready(function($) {
        var speed= 1000,
        num = 1,
        timer;

        (function rotate() {
            $(".item"+num).css('visibility','visible').stop(true, true).fadeIn('slow').delay(speed).fadeOut(speed);;
            num>=3 ? num=1 : num++;
            timer = setTimeout(rotate, speed*3);
        })();
    });
    </script>

The classes for items where ID's at first. But now I have added the authors to the function, and I changed the ID's to classes. But now the function has stopped working. Do you guys have any idea why this happens?

Answer 1

You can't set 2 class attribute on an HTML element. Just put all your classes in a only one class attribute.

<div class="authors item1">

By the way, if you need to make an element unique, use ID instead of classes.