Toggle/animate css class automatically on specific intervals with jquery

Question

The following php code generates three list items. I want to add/remove a css class active on mouseover/mouseout. The js shown below toggles the class active successfully, but all at once as I mouseover on an item. I want to animate a single list item on hover. Since its a loop, I do not quite understanding how to animate individual list item on mouseover. Another requirement is that I would like to animate the list items automatically in addition to manual hovering after 5 seconds each as the page loads. I am not very conversant with js so any insights you offer to me will be much appreciated.

<ul class="daily-featured__videos">
    <?php for ($i = 0; $i < 3; $i++) : ?>
        <li class="the-daily-featured__video daily-featured__video active">
            <div class="daily-featured__video-image">
                <a href="<?php echo $this->url($this->videos[$i]->getProperties(), 'media_video_view'); ?>" >
                    <img title="<?php echo addslashes($this->videos[$i]->title); ?>" src="<?php echo $this->videos[$i]->getPoster('small'); ?>" style="width: 258px;">
                    <div class="thumbnail-action-button icon-play the-thumnbail-action-button" data-label="<?php echo $this->videos[$i]->duration; ?>" ></div>
                </a>
            </div>
            <div class="daily-featured__video-text">
                <div class="daily-featured__video-channel"><?php echo $this->videos[$i]->credit; ?></div>
                <h2 class="daily-featured__video-title">
                    <a href="<?php echo $this->url($this->videos[$i]->getProperties(), 'media_video_view'); ?>">
                        <?php echo $this->videos[$i]->title; ?>
                    </a>
                </h2>
                <?php daily_featured_socials(); ?>
            </div>
        </li>
    <?php endfor; ?>
</ul>


<script type="text/javascript">
    $(document).ready(function() {
        $(".the-daily-featured__video").hover(function() {
            $(".the-daily-featured__video").toggleClass("active");
        });
    });
</script>

maxgallo · Accepted Answer · 2016-05-03 17:57:13Z

2

You can do it this way:

<script type="text/javascript">
    $(document).ready(function() {
        $(".the-daily-featured__video")
            .mouseenter( function(){ $(this).addClass("active") })
            .mouseleave( function(){ $(this).removeClass("active") });
    });
</script>

And here a simplified version on jsbin: https://jsbin.com/zowidaruke/

answered May 3, 2016 at 17:57

maxgallo

4783 silver badges14 bronze badges

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

3 Comments

Anay Bose Over a year ago

it seems to be working. Any suggestions, of doing it automatically on a specific time interval, from left to right and vice-versa?

maxgallo Over a year ago

Yeah, you can find an implementation here: jsbin.com/senedakupu (sorry wrong link before)

Anay Bose Over a year ago

Your code is working as expected. I have considered this as the correct answer.

Collectives™ on Stack Overflow

Toggle/animate css class automatically on specific intervals with jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related