Incrementing(+) text size via delayed loop on 'mouseover'

Question

I'm trying to create a <p> that first renders nearly invisible, then on 'mouseover' becomes visible and incrementally increases in size, to finally 1em. Then on 'mouseout' reverts to its original settings. For the delay, I'm using a sleep() function referenced from this(stackoverflow) answer(works great, thank you).

What's happening is that while the increment works fine, the <p> doesn't appear until the end of the loop. Suddenly, rather than throughout, and I'm not sure why... The 'mouseout' event works fine. Tested in firefox, chrome and safari on OS X 10.9 same in all three.

/*jslint browser: true*/
/*global $, jQuery, alert*/

function sleep(milliseconds) {
    var start = new Date().getTime(), i;
    for (i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > milliseconds) {
            break;
        }
    }
}

var Test_MouseOver = function (event) {
    var i, text_size;

    $('#Test').css('background', 'rgba(0, 0, 100, 0.6)').css('color', 'rgba(100, 0, 0, 1)');

    for (i = 0.2; i <= 1; i = i + 0.1) {
        text_size = i.toString() + 'em';

        console.info('i: ' + text_size);

        $('#Test').css('font-size', text_size);

        sleep(50);
    }

    console.info('-----');
};

var Test_MouseOut = function (event) {
    $('#Test').css('background', 'rgba(0, 0, 0, 0.0)').css('color', 'rgba(100, 0, 0, 0.2)').css('font-size', '0.2em');
};

var Test = document.getElementById('Test');

Test.addEventListener('mouseover', Test_MouseOver);
Test.addEventListener('mouseout', Test_MouseOut);

Well, apparently the sleep does not work great. Never use such a thing, but do it properly — Bergi
– Bergi, Commented Nov 11, 2014 at 0:47
Are you sure it's the sleep() that is causing the issue? The DOM and console register the incrementing font-size just fine. How would the sleep function be interfering with the rendering? The entirety of the loop lasts for less than a second, so it doesn't really cause any browser lag. — Nathan Hine
– Nathan Hine, Commented Nov 11, 2014 at 0:52
If you're using jQuery, would you be open to using jQuery's animate? Or, is this for learning?? — Jack
– Jack, Commented Nov 11, 2014 at 1:00
Learning. animate you say...I'm going to look into that immediately. Thank you. — Nathan Hine
– Nathan Hine, Commented Nov 11, 2014 at 1:03
Yes, it's the sleep. Busy waiting does block rendering. In some browsers, the console is affected by this as well. — Bergi
– Bergi, Commented Nov 11, 2014 at 1:12

elzi · Accepted Answer · 2014-11-11 00:50:53Z

1

I think you're looking for setInterval

setInterval(function() {
  // do stuff every 50ms
}, 50);

answered Nov 11, 2014 at 0:50

elzi

5,6927 gold badges39 silver badges62 bronze badges

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

2 Comments

Nathan Hine Over a year ago

HMM, I'm going to test this right now, hadn't encountered that function yet. Thank you.

elzi Over a year ago

No problem. You also might be come to need setTimeout.

Roko C. Buljan · Accepted Answer · 2014-11-11 00:58:24Z

0

pure CSS3:

#Test{
  border: 1px solid red;
  
  background: rgba(0, 0, 0, 0.0);
  color: rgba(100, 0, 0, 0.2);
  font-size:0.2em;
  transition: all 2s ease-in-out 3s; /* 3s is the mouseleave delay */
}
#Test:hover{
  background: rgba(0, 0, 100, 0.6);
  color: rgba(100, 0, 0, 1);
  font-size: 1em;
  transition-delay: 0s; /* 0s delay on mouseenter */
}

 <div id="Test">Hello world</div>

P.S:

instead of nesting .css().css() use object notation:

.css({
      background : "rgba(0, 0, 0, 0.0)",
      color      : "rgba(100, 0, 0, 0.2)",
      font-size  : "0.2em"
})

edited Nov 11, 2014 at 0:58

answered Nov 11, 2014 at 0:52

Roko C. Buljan

209k41 gold badges334 silver badges346 bronze badges

4 Comments

Nathan Hine Over a year ago

lol Yeah, I know I can do it with CSS, but JS is fun! Plus I want it to scale up over the delay rather than POP up. (edit) Oh, transition animates the transition?

Roko C. Buljan Over a year ago

@NathanHine POPup?... c'mon have you tried to modify 2s transition time to i.e: 6s? (CSS3 vs JS in animations?... I would not say so )

Nathan Hine Over a year ago

VERY interesting. I'm going to play around with this thoroughly. Thank you.

Nathan Hine Over a year ago

I'm still learning atm, CSS3 transitions fall late into the Advanced category. Thank you for pointing me to them. JS is still fun though. :)

Nathan Hine · Accepted Answer · 2014-11-12 19:59:25Z

[SOLVED]I've arrived at a solution using .animate() and setTimeout() that achieves my desired result. The <p> appears on 'mouseover' scales up to 1em then disappears 5 seconds later. I removed the 'mouseout' event as obsolete. Thank you for the feedback everyone, I now have several new tools in my JS and CSS3 belts.

var Restore_Settings = function (event) {
    $('#test').css({
        background  :   'rgba(0, 0, 0, 0.0)',
        color       :   'rgba(100, 0, 0, 0.2)',
        'font-size' :   '0.2em'
    });
};

var Test_MouseOver = function (event) {
    var DelayInterval, RestoreInterval;
    DelayInterval = 2000;
    RestoreInterval = 5000;

    $('#test').css({
        color       :   'rgba(100, 0, 0, 1)'
    });

    $('#test').animate({ 
        'font-size' :   '1em' },
        DelayInterval
    );

    setTimeout(Restore_Settings, RestoreInterval);
};

As this is my first question, I'm not sure if it's bad practice to post a [Solved] answer to my own question. Let me know if so, please. Thanks.

Collectives™ on Stack Overflow

Incrementing(+) text size via delayed loop on 'mouseover'

3 Answers 3

2 Comments

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Linked

Related