爲fadein和fadeout jquery動畫

我要爲div標籤添加動畫，如淡入淡出。
當用戶將鼠標放在div標籤上時，該標籤將淡出。
當用戶將鼠標移出div標籤時，該標籤將淡入。
這是測試代碼。爲fadein和fadeout jquery動畫

  $('#div1').mouseleave(function(){ 
 
      $('#div1').fadeIn(); 
 
      console.log("out"); 
 
      }); 
 

 
      $('#div1').mouseover(function(){ 
 
      $('#div1').fadeOut(); 
 
      console.log("in"); 
 
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1">hover over me</div>

但是，當用戶把鼠標放在div標籤，動畫重複。
我該如何解決這個問題？

來源

2017-02-04 Andrew Li

的問題是，如果你:hover和會發生什麼是元素變得display: none;（你會在我的例子見綠盒），所以當它是元素是不存在了，所以要在mouseleave被調用。要解決這個問題是隱藏的子元素，並保持父（orange box），所以鼠標仍然是在父#div1 ......

$('#div1').mouseleave(function(){ 
 
    $(this).children('.fade-me').fadeIn(); 
 
    console.log("out"); 
 
}); 
 

 
$('#div1').mouseover(function(){ 
 
    $(this).children('.fade-me').fadeOut(); 
 
    console.log("in"); 
 
});

#div1 { 
 
    background-color: orange; 
 
    padding: 10px; 
 
    min-height: 20px; 
 
} 
 

 
#div1 > div { 
 
    background-color: green; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1"> 
 
    <div class="fade-me">hover over me</div> 
 
</div>

你知道你可以做到這一點只有CSS？讓我知道你是否只需要一個CSS的例子。

來源

2017-02-04 09:51:20 caramba

我不知道，也可能僅適用於CSS做什麼？ –

@AndrewLi是的。看看我昨天剛剛寫的這個答案：http://stackoverflow.com/a/42020198/2008111讓我知道你是否與這個問題相處並且需要一個具體的例子來說明你的標記。 – caramba

但我認爲沒有動畫。我想添加動畫。 –

那麼，你不必在這裏使用jQuery！你可以使用普通的CSS。

div { 
 
    background-color: red; 
 
    transition: 1s opacity ease; /* this here makes sure that all changes to the "opacity" element happen over 1 second. */ 
 
} 
 
div:hover { 
 
    opacity: 0; 
 
}

<div> 
 
    Aravind! 
 
</div>

來源

2017-02-04 10:10:50

爲fadein和fadeout jquery動畫

回答

相關問題