gpt4 book ai didi

javascript - div 在鼠标移动时淡入,不淡出

转载 作者:行者123 更新时间:2023-11-28 07:25:54 25 4
gpt4 key购买 nike

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

我知道如何在 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 在页面加载并移动鼠标后永久淡入。谢谢!

最佳答案

如果你想继续使用 Jquery + CSS,试试 Jquery animate 方法

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

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

关于javascript - div 在鼠标移动时淡入,不淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31819775/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com