Question

目标是在页面加载后和鼠标移动后让#content div淡入。这只发生在主页上。所有其他页面上的#content都不会淡入。

我知道如何在CSS中实现大部分功能。也就是说，我可以在页面加载后仅在主页上获得#content淡入淡出。试图找出mousemove部分。

我已经阅读了所有相似的帖子，其中大多数也涉及淡出。以下是我到目前为止所做的事情：

<script type="text/javascript">
$(document).ready(function(){
    $("html").on('mousemove', function(){
        $("#content").stop().fadeIn("slow");
    });
});
</script>

我也尝试过：

<script type="text/javascript">
$(document).ready(function(){
    $("html").mousemove(function(){
        $("#content").stop().fadeIn("slow");
    });
});
</script>

这些脚本位于<head>。

在CSS中，我有

.fadeonmouse{
    opacity: .0;
    filter:alpha(opacity=0);
}

.fadeonmouse只在主页上的#content div类中。我使用以下php：

<div id="content" class="site-content <?php if( is_page(get_option('page_on_front')) ) { ?>fadeonmouse<?php } ?>">

我也遇到过人们使用onmousemove="function()"的方法在div标签中。我也无法让它工作。

我是javascript的新手，但我对CSS非常扎实。有没有办法在鼠标移动后触发CSS动画？我只是希望div在页面加载并移动鼠标后永久淡入。谢谢！

Answer 1

如果您想继续使用Jquery + CSS，请尝试使用Jquery animate方法

$("#content").animate({
            opacity:1
        },500);

jsfiddle link https://jsfiddle.net/yehzp2rL/

div淡入鼠标移动，不淡出

1 个答案: