Set Opacity from 0 to 1 when page loads

Question

I am trying to write a page where it loads several objects in an timed order using JavaScript. I've managed to make objects blink using CSS3, but not quite sure how to combine it with timer in JavaScript.

here is my code:

<script language="javascript">
$(document).ready(function () {
var t;
function blink(){
    $("#blinkfirst").setOpacity(0);
    $("#blinkfirst").setStyle({visibility: 'visible'});
    new Effect.Opacity(
    "#blinkfirst", { 
        from: 0.0, 
        to: 1.0,
        duration: 1.0
     }
 );
}

function appear(){
t=setTimeout('blink()', 8);
}
});
</script>

my logic is to write one function to change the opacity of a div from 0.0 to 1.0, so it will show up. and then write another function to call this function after every certain seconds for different objects. for example, make div1 appears first, and 8 seconds later, div2 appears; 8 seconds later, div3 appears...

What library are you using? Those are not standard jquery functions. — James Montagne, Oct 21 '13 at 19:19
I am looking for a way to not use any library. The current code has the library from this page: http://madrobby.github.io/scriptaculous/effect-appear/ — BigGirl1017, Oct 21 '13 at 20:02
That's not mootools, just javascript mixed with jQuery selectors. — Charlie, Oct 21 '13 at 21:30

FiLeVeR10 · Accepted Answer · 2013-10-22T13:15:27.327

3

Seems like a lot of code to fade things in. This would probably simplify things. Add the class "blink" to each element you want to apply, and an additional class of 'load-0', etc to specify order.

$('.blink').fadeTo(0,0).each(function(i) {//initial fadeout, then blink loop
    var bk = $(this);//can i get a blink?
    if ($('.load-0').length) { bk = $('.load-'+i); }//load ordering support
    bk.delay(i*2000).animate({opacity: '1'}, 1000);//animate [delay,opacity,duration]
});

That will hide them at first, then fade them in 2 seconds apart from each other.

made a fiddle: http://jsfiddle.net/filever10/nw8kM/

edited Oct 22 '13 at 13:15

answered Oct 21 '13 at 19:25

FiLeVeR10

2,155
1
12
13

Thanks! this works! my question is that how would i apply this to multiple divs? for example, now the #blinkfirst div is calling this functions. Shall i put the other ids inside of a class and call these functions? for example, .blink #first, .blink #second, .blink #third...$('.blink')... – BigGirl1017 Oct 21 '13 at 20:09
this will go through all divs with a class of "blink", in order of syntax. You could add an attribute or class to define the order, and use i to affect those in the order you want. so adding an additional class of 'load-0', etc. to each. then change the 3rd line to $('.load-'+i).delay(i*8000).animate({opacity: '1'}, 1000); – FiLeVeR10 Oct 21 '13 at 20:17
thank you! this works well! actually I kept the third line to be $(this).delay...and then put in the html
content 1
content 2
content 3
and it works just like the way I want. Thank you! – BigGirl1017 Oct 21 '13 at 21:27
sorry to bother you after many days. I just wanna let you know that your solution for load many objects works beautifully. Here is the problem I encountered and your solution solves the issue. I just wanna say thanks! Take a look at this page in case you're interested. http://stackoverflow.com/questions/19867473/display-animation-every-time-clicks-a-button-using-jquery. – BigGirl1017 Nov 08 '13 at 23:05
no worries, I added an answer on it for you that will makes things a little easier. – FiLeVeR10 Nov 09 '13 at 00:10

Karlen Kishmiryan · Answer 2 · 2013-10-21T20:34:45.733

0

For the blink effect, you can simply wrap the element with setInterval function and call fadeIn/fadeOut of jQuery on it.

setInterval(function(){
    $('.blink').fadeIn(500).fadeOut(500);
}, 0);

Here is the demo in JSFiddle.

UPDATE 1:

Here is the pure JavaScript solution.

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

var timer = setInterval(function(){
    if(blink.style.display == 'none') {
        blink.style.display = 'block';
    } else {
        blink.style.display = 'none';
    }
}, 500);

Using display CSS property to hide/show the element.

Check out the working fiddle here.

UPDATE 2:

And here is the fixed solution using jQuery's animate() function.

var timer = setInterval(function(){
    $blink.stop().animate({
        opacity: 1
    }, 500, function() {
        $blink.animate({
            opacity: 0
        }, 500);
    });

    $blink.text($blink.queue( "fx" ).length);
}, 1000);

Check out the working fiddle here.

edited Oct 21 '13 at 20:34

answered Oct 21 '13 at 19:39

Karlen Kishmiryan

7,322
5
35
45

2

This will grow out of control in a hurry. You're going to keep queueing animations constantly forever. See this update to your fiddle with a count of how many animations are in your queue. http://jsfiddle.net/uw8Ub/1/ – James Montagne Oct 21 '13 at 19:45
Thanks for highlighting that. So can you give a solution for this? Should I clear the queue explicitly or there's already a nice solution? – Karlen Kishmiryan Oct 21 '13 at 20:09
Personally, I would ditch `setInterval` entirely and use a callback on the `fadeOut` to start the next cycle. Something like this http://jsfiddle.net/uw8Ub/5/ – James Montagne Oct 21 '13 at 20:35
I've added two solutions. The first one using pure `JavaScript` and the second one using `jQuery`'s `animate()` with the callback. – Karlen Kishmiryan Oct 21 '13 at 20:37
@JamesMontagne It's a very elegant solution. Thanks for sharing. – Karlen Kishmiryan Oct 21 '13 at 20:40
Thank you guys! these solutions are very nicely written. It's different than what I want to display tho, but thank you for the help! it will be really helpful for my other projects!!! – BigGirl1017 Oct 21 '13 at 21:28

score 0 · Answer 3 · answered Oct 22 '13 at 14:09

Use the following code-

<script language="javascript">
$(document).ready(function () {
var t;
function blink(){
    $("#blinkfirst").setStyle({opacity: '0'});
    $("#blinkfirst").setStyle({visibility: 'visible'});
    new Effect.Opacity(
    "#blinkfirst", { 
        from: 0.0, 
        to: 1.0,
        duration: 1.0
     }
 );
}

function appear(){
t=setTimeout('blink()', 8000);
}
});
</script>

Set Opacity from 0 to 1 when page loads

3 Answers3