Question

我试图淡入我的页面上的一个元素，这是一些用CSS格式化的文本。我可以使用element.fadeIn()获得淡入淡出的纯文本元素。但这与我的文档当前元素无关。 onMouseOver和onMouseOut事件正确显示并隐藏了没有淡入淡出的元素。我试图通过鼠标事件让它淡入（并最终淡出）。

<body>的第一部分：

<body>
        <div class="content">
            <h1 class="title">Application</h1>
            <ul id="sdt_menu" class="sdt_menu" >
            <li onMouseOver="change_it('sub2');" onMouseOut="change_back('sub2');">
                    <a href="../app.exe">
                        <img src="images/1.jpg" alt=""/>
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">APPName</span>
                            <span class="sdt_descr">Click to Install</span>
                        </span>
                    </a>

尝试淡入文本的功能：

function change_it(id)
{
   setVisibility(id, 'inline');
   //id.FadeIn("slow");
   // $('div.detail').fadeIn('fast');

}

设置可见性的功能：

function setVisibility(id, visibility) {
  document.getElementById(id).style.display = visibility;
}

＆＃34; sub2＆＃34;元素：

<div class ="detail" id="sub2">
<p><b>Welcome my application!</b></p>
<p>Here is a bunch of text I want to fade in during a mouse over another element!
</p>
</div>

从CSS文件：

.detail{ 
position: fixed; 
top: 0; 
left: 35%; 
width: 650px; 
height: 300px;
Line-height: 1.4em;
color : white; 
}

有人可以发现问题或建议我需要做些什么来淡入＆＃34; sub2＆＃34;鼠标悬停在行动中的元素？

Answer 1

由于您没有回答关于显示与可见性的问题，我假设您希望它占用空间（示例）：

的CSS：

.fade-in
{
  opacity: 0;
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  -ms-transition: opacity 1s ease-in;
  -o-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;    
}

.fade {
  opacity: 1;
}

jquery的：

$(document).ready(function()
{
  $('.fadeIn').on('click', function()
  {
    var target = $(this).data('target');
    $(target).toggleClass('fade');
  });
});

HTML：

<a href="#" class="fadeIn" data-target="#theId">Click me!</a>
<div id="theId" class="fade-in">You clicked on Click me!</div>
<div>Hi!</div>

JsFiddle Example

鼠标悬停期间淡入非文本元素

1 个答案: