淡入淡出鼠標期間的非文本元素

我試圖在我的頁面上使用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; 
}

的「SUB2 「元素：

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

有人能找出問題或建議什麼，我需要做的鼠標操作過程中「SUB2」元素褪色？

來源

2014-08-28 ikathegreat

fadeIn/fadeOut jQuery函數對於它們的工作類型非常有限。 – ControlAltDel 2014-08-28 15:07:35

你想淡入特定的文本或任何元素？你想讓不可見的元素佔據空間，或者淡入並佔用空間（'visibility：hidden' vs'display：none'）。 – 2014-08-28 15:07:38

setVisibility'的方法是什麼？ – LcSalazar 2014-08-28 15:08:45

既然你沒有回答我關於顯示器VS知名度的問題，我會假設你想讓它佔用空間（舉例）：

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

來源

2014-08-28 15:55:31

淡入淡出鼠標期間的非文本元素

回答

相關問題