1

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);
Community
  • 1
  • 1
Nathan Hine
  • 13
  • 3
  • Well, apparently the `sleep` **does not work great**. Never use such a thing, but [do it properly](http://stackoverflow.com/q/14327647/1048572) – Bergi Nov 11 '14 at 00: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 Nov 11 '14 at 00:52
  • If you're using jQuery, would you be open to using jQuery's `animate`? Or, is this for learning?? – Jack Nov 11 '14 at 01:00
  • Learning. `animate` you say...I'm going to look into that immediately. Thank you. – Nathan Hine Nov 11 '14 at 01:03
  • Yes, it's the `sleep`. Busy waiting *does* block rendering. In some browsers, the console is affected by this as well. – Bergi Nov 11 '14 at 01:12
  • Ohhh, I see. So, solutions seem to be pure CSS, `animate`, `setInterval()` and `setTimeout()`. Testing all of them, I'll post which work best for my intended result. Thanks for all the answers everyone. – Nathan Hine Nov 11 '14 at 01:19

3 Answers3

1

I think you're looking for setInterval

setInterval(function() {
  // do stuff every 50ms
}, 50);
elzi
  • 5,442
  • 7
  • 37
  • 61
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"
})
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • 1
    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? – Nathan Hine Nov 11 '14 at 00:57
  • @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 ) – Roko C. Buljan Nov 11 '14 at 01:00
  • **VERY** interesting. I'm going to play around with this thoroughly. Thank you. – Nathan Hine Nov 11 '14 at 01:06
  • 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 Nov 11 '14 at 01:13
0

[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.

Nathan Hine
  • 13
  • 3