可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

So. I've been trying to create a simple piece of text that fades in when the page loads. I've explored a lot hear on Stack Overflow and also considered this:

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadein

I even looked into using a window.onload, not to mention this:

<body onload="$("#fadein p.desktoptheme").delay(1000).animate({"opacity": "1"}, 700);">

But the fade in won't work. The text never displays.

I have the opacity for the element set as 0 (using CSS).

<script type="text/javascript">

$("#fadein p.desktoptheme").delay(1000).animate({"opacity": "1"}, 700);

</script>

One moar thing: The text that's placed inside the <p class="desktoptheme"></p> tag is generated with PHP. It could be that PHP is server-side while JavaSciprt is client-side. If so, what do I use? A delay? AJAX?

Any thoughts?

回答1:

When using jQuery you will always want to put your DOM manipulating code inside jQuery´s .ready(function()), or else your code will fire before the page was successfully loaded

Example:

<script type="text/javascript">

$( document ).ready(function() {
   $("#fadein p.desktoptheme").delay(1000).animate({"opacity": "1"}, 700);
});

</script>

For a more elegant solution, you may also consider using CSS animations do get the same effect. Check out this link for more information on fading in elements with CSS.

To place server-side content in a page rendered with PHP, provided your text is available before the page is loaded, you just need to echo the variable mixed with your HTML.

Example:

<p class="desktoptheme"><?php echo "Hello world"; ?></p>

回答2:

Any text that you stick inside of your element with PHP will already be there when javascript runs--as you said, PHP is server side, javascript is client side. So you don't need to worry about that.

I see you're using jQuery, so you should be looking at $(document).ready(). This function executes some javascript after the page has finished loading. For example:

JS:

$(document).ready(function() {
    $('.fadein').animate({'opacity' : 1}, 700);
})

HTML:

<p class='fadein'>
This is some text that will fade in.
</p>

CSS:

.fadein {
  opacity: 0;
}

Here's a JSFiddle so you can play around with it some more. Notice that the class of the paragraph (fadein) has to match your jQuery selector $('.fadein') and your css selector .fadein.

Fiddle

回答3:

I have a function which does just that. It looks a bit like a jQuery fade(), but it's bog-standard JavaScript and can be used with or without an on-completion callback function.

/* fade.In(), fade.Out():
    el = element object
    dur = duration milliseconds
    fn = callback function
*/
var fade = {
    In: function(el, dur, fn) {
        var time = Math.round(dur / 10);
        function fader(t, e, v) {
            if (v < 1) {
                e.style.opacity = v;
                setTimeout(function () {
                    fader(t, e, parseFloat((v += 0.1).toFixed(2)));
                }, t);
            } else {
                e.style.opacity = '1';
                if (fn) fn();
            }
        }
        if (el.style.display === 'none') el.style.display = 'block';
        el.style.opacity = '0';
        fader(time, el, 0);
    },
    Out: function(el, dur, fn) {
        var time = Math.round(dur / 10);
        function fader(t, e, v) {
            if (v > 0) {
                e.style.opacity = v;
                setTimeout(function () {
                    fader(t, e, parseFloat((v -= 0.1).toFixed(2)));
                }, t);
            } else {
                el.style.opacity = '0';
                e.style.display = 'none';
                if (fn) fn();
            }
        };
        fader(time, el, 1);
    }
};

/* Usage */ 

var elem1 = document.getElementById('id1');
var elem2 = document.getElementById('id2');

// fade in with callback
fade.In(elem1, 500, function() {
    // ... do something after fade in ...
});
// fade out without callback
fade.Out(elem2, 666);

Works best for relatively fast transitions: c.500ms +|- 200 (ish).

For you purposes just call the fade.In() function on the chosen element on page load.

Hope that helped. :)

回答4:

Check out animate.css. Put this in your head:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css">

Then add

animated fadeIn

to your class:

<p class="desktoptheme animated fadeIn"></p>

If you want it to animate when you scroll to the element check out WOW.js

回答5:

I would highly recommend using a js library called velocity to help with css animations.

If I follow you right, it would look something like this...

css

p.desktoptheme {
    display: none;
    opacity: none;
}

jquery

$(function(){ 
    $('p.desktoptheme').velocity('fadeIn', {
        'duration': 300,
        'delay': 1000,
        'complete': function(){
            // all done!
        }
    });
});