Home/ Questions/Q 7494137
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T17:20:17+00:00

Here is my code for a mouseover: $(‘.caption’).mouseover(function() { $(this).fadeTo(‘slow’,1); $(this).css(‘color’,’#ddd’).animate({‘color’: ‘white’}, 500); $(this).css(‘font-weight’,’bold’);

  • 0

Here is my code for a mouseover:

$('.caption').mouseover(function() {
    $(this).fadeTo('slow',1);
    $(this).css('color','#ddd').animate({'color': 'white'}, 500); 
    $(this).css('font-weight','bold');
});

$('.caption').mouseleave(function() {
    $(this).fadeTo('slow',0.9);
    $(this).css('color','white').animate({'color': '#ddd'}, 500); 
    $(this).css('font-weight','normal');
});

I have four boxes that this works with, all with the class .caption. I would like to make these actions rotate between the four of them with a certain number of seconds pause (say, 5) before moving to the next one. In other words, the mousedown effects (without having a mousedown), wait 5 seconds, mouseup effect, then move to the 2nd .caption, and do the same… etc.

Here is where I am, 45 minutes later or so.

function doRotate(num) {

    var len = 3; // starts at 0
    var index = num;

    $('div .nav-piece').each = function() {
        setInterval(function() {
            $('div .nav-piece').eq(index).animate({
                backgroundColor: "white"
            }, 500);
        }, 500);

        setInterval(function() {
            $('div .nav-piece').eq(index).animate({
                backgroundColor: "#cfc4c3"
            }, 500);
        }, 500);
    }
}

Here is the html:

 <div id="nav-container">
        <div id="piece1" class="nav-piece">
            <div style="background-image: url('assets/bg_example.jpg'); background-repeat: no-repeat;">
                <div class="caption overlay-top">Text example</div>
            </div>
        </div>
          <div id="piece2" class="nav-piece">
            <div style="background-image: url('assets/bg_example.jpg'); background-repeat: no-repeat;">
                <div class="caption overlay-bottom">Text example</div>
            </div>
        </div>
          <div id="piece3" class="nav-piece">
            <div style="background-image: url('assets/bg_example.jpg'); background-repeat: no-repeat;">
                <div class="caption overlay-top">Text example</div>
            </div>
        </div>
          <div id="piece4" class="nav-piece">
            <div style="background-image: url('assets/bg_example.jpg'); background-repeat: no-repeat;">
                <div class="caption overlay-bottom">Text example</div>
            </div>
        </div>
    </div>

doReady is called at document.ready.

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First of all, you should use mouseenter/mouseleave or mouseover/mouseout in combination, not a mix of the two behaviors

    This will achieve what you want. Each caption is executed in the callback from the prior animation. We use queue to put the element’s into the fx queue (the only place delay() works).

    I’d throw this on fiddle, but fiddle seems to be in read-only mode today! 🙂

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <title>test url stuff</title>


   <style type="text/css">
      .caption { width: 50px; height: 50px; margin: 20px; padding: 5px; float: left; }
      .red { background-color: red; }
      .blue { background-color: blue; }
      .yellow { background-color: yellow; }
      .green { background-color: green; }
      .black { background-color: black; }
   </style>

   <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>

</head>
<body>

<script type="text/javascript">
   jQuery(function($) {
      var
         // how long should it animate?
         howLong = 1000,

         // apply the font-weight when animation completes
         mouseInProps = {duration: 500, complete: function() { $(this).css('font-weight','bold');} },

         mouseOutProps = {duration: 500,
            complete: function() {
               var $this = $(this);
               // apply the font-weight when animation completes
               $this.css('font-weight','normal');
               if( $this.next().length ) {
                  // this makes them successively call the next element and animate it
                  // by using the complete: callback on animate's props
                  queueOne($this.next());
               }
            }
         };

      function queueOne($e) {
         $e.queue(function(){
            $(this).fadeTo('slow', 1).animate({'color': '#fff'}, mouseInProps).dequeue();
         })
         // make the queue pause x seconds
         .delay(howLong)
         // apply the mouseleave effects
         .queue(function() {
            $(this).fadeTo('slow', .9).animate({'color': '#ddd'}, mouseOutProps).dequeue();
         });
      }

      queueOne($('.caption').first());
   });
</script>

<div class="caption red">one</div>
<div class="caption green">two</div>
<div class="caption blue">three</div>
<div class="caption yellow">four</div>
<div class="caption black">five</div>

</body>
</html>
    • 0