Question

因此。我一直试图创建一个简单的文本片段，在页面加载时淡入淡出。我已经在Stack Overflow上探索了很多，并且也考虑过这个：

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

我甚至考虑过使用window.onload，更不用说了这个：

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

但淡入淡出不会起作用。文字永远不会显示。

我将元素的不透明度设置为0（使用CSS）。

<script type="text/javascript">

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

</script>

一件大事：用<p class="desktoptheme"></p>标签放置的文本是用PHP生成的。可能是PHP是服务器端而JavaSciprt是客户端。如果是这样，我该怎么用？延迟？ AJAX？

有什么想法吗？

Answer 1

使用jQuery时，您总是希望将DOM操作代码放在jQuery的.ready(function())中，否则您的代码将在页面成功加载之前触发

示例：

<script type="text/javascript">

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

</script>

对于更优雅的解决方案，您也可以考虑使用CSS动画确实获得相同的效果。有关使用CSS淡化元素的更多信息，请查看this link。

要将服务器端内容放在使用PHP呈现的页面中，只要您的文本在加载页面之前可用，您只需要回显与HTML混合的变量。

示例：

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

Answer 2

当你运行javascript时，你在PHP元素内部的任何文本都已存在 - 正如你所说，PHP是服务器端，javascript是客户端。所以你不必担心这个。

我看到你正在使用jQuery，所以你应该看$(document).ready()。页面加载完成后，此函数会执行一些javascript。例如：

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;
}

这是一个JSFiddle，所以你可以再玩一遍。请注意，段落的类（fadein）必须与您的jQuery选择器$('.fadein')和您的css选择器.fadein相匹配。

Fiddle

Answer 3

我有一个功能就是这样。它看起来有点像jQuery fade（），但它是bog标准的JavaScript，可以使用或不使用on-completion回调函数。

/* 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);

最适合相对快速的过渡：c.500ms + | - 200（ish）。

为了您的目的，只需在页面加载时调用所选元素上的fade.In()函数。

希望有所帮助。：）

Answer 4

结帐animate.css。把它放在脑海中：

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

然后添加

动画fadeIn

到你的班级：

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

如果您希望在滚动到元素时设置动画，请查看WOW.js

Answer 5

我高度建议使用名为velocity的js库来帮助css动画。

如果我跟着你，它会看起来像这样......

<强> CSS

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

<强> jquery的

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

淡入动画

5 个答案: