div在mousemove上淡入，没有淡出

Question

The goal is to have the #content div fade in after the page has loaded and after the mouse moves. 目标是在页面加载后和鼠标移动后淡入#content div。 This only happens on the homepage. 这仅在首页上发生。 #content on all other pages do not fade in. 其他所有页面上的#content不会淡入。

I know how to achieve most of this in CSS. 我知道如何在CSS中实现大部分功能。 That is, I can get the #content on only the homepage to fade in after the page loads. 也就是说，我只能在首页上获取#content，以便在页面加载后淡入。 Trying to work out the mousemove part. 尝试找出mousemove部分。

I've read through all the similar posts, most of which involve fading out as well. 我已经阅读了所有类似的帖子，其中大多数都涉及淡出。 Here is what I've put together so far: 到目前为止，这是我整理的内容：

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

I also tried: 我也尝试过：

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

Those scripts are in the <head> . 这些脚本在<head> 。

In the CSS, I have 在CSS中，

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

.fadeonmouse in a class of the #content div only on the homepage. .fadeonmouse仅在首页上#content div的类中。 I am using the following php: 我正在使用以下php：

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

I have also come across a method where people use onmousemove="function()" right in the div tag. 我还遇到了一种方法，人们可以在div标签中使用onmousemove="function()" 。 I haven't been able to get that to work either. 我也无法使它正常工作。

I'm new to javascript but I'm solid with CSS. 我是javascript新手，但对CSS还是很满意。 Is there a way to trigger a CSS animation after the mouse moves? 鼠标移动后是否可以触发CSS动画？ I just want the div to fade in, permanently, after the page loads and the mouse is moved. 我只希望div在页面加载和鼠标移动后永久消失。 Thank you! 谢谢！

Answer 1

If you want to proceed with Jquery + CSS, try Jquery animate method 如果要继续使用Jquery + CSS，请尝试使用Jquery animate方法

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

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

div在mousemove上淡入，没有淡出

问题描述

1 个解决方案

解决方案1
0 2015-08-04 21:46:49

div在mousemove上淡入，没有淡出

问题描述

1 个解决方案

解决方案1 0 2015-08-04 21:46:49

解决方案1
0 2015-08-04 21:46:49