Fadein，fadeout事件一起使用jquery

我想淡出所有的div淡出事件工作，但當我的鼠標進入第一個div時，它會影響所有其他div。如果我沒有單獨定義demo和demo1函數，那麼它的工作正常否則它的工作是這樣的。我不明白什麼是錯的？Fadein，fadeout事件一起使用jquery

<html> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
</head> 
<body> 
<p>Fade Out Example</p><br> 
<div class="fade" id="div1" style="background-color:red;width:100px; height:100px"> </div><br> 
<div class="fade" id="div2" style="background-color:blue;width:100px; height:100px"> </div><br> 
<div class="fade" id="div3" style="background-color:cyan;width:100px; height:100px"> </div> 

</body> 

    <script> 

$(document).ready(function(){ 
    $("#div1").bind("mouseenter",(demo)); 
    $("#div1").bind("mouseleave",(demo1)); 

     $("#div2").bind("mouseenter",(demo)); 
     $("#div2").bind("mouseleave",(demo1)); 

      $("#div3").bind("mouseenter",(demo)); 
       $("#div3").bind("mouseleave",(demo1)); 
    }); 
function demo() 
{ 
$("#div1").css("background-color","lightgreen").fadeOut(); 
$("#div2").fadeOut(); 
$("#div3").fadeOut(); 
} 
function demo1(){ 
    $("#div1").css("background-color","red").fadeIn(); 
     $("#div2").fadeIn(); 
      $("#div3").fadeIn(); 
} 
    </script> 
</html>

來源

2016-06-17 Priyanka Maurya

HTML裏面''運行它..真的嗎？ :) –

這是錯誤，而張貼... :( –

你的代碼說淡出所有3或全部褪色3.如果那不是你想要的，那麼不要把它 –

使用fadeTo，不會在你的DOM刪除div元素;在代碼片段

function demo(id) 
 
    { 
 
     if(id == 1){ 
 
      $("#div"+id).css("background-color","lightgreen").fadeTo('slow',0); 
 
     }else if(id != 1){ 
 
      $("#div"+id).fadeTo('slow',0); 
 
     } 
 
    } 
 
    function demo1(id){ 
 
     if(id == 1){ 
 
      $("#div"+id).css("background-color","red").fadeTo('slow',1); 
 
     }else if(id != 1){ 
 
      $("#div"+id).fadeTo('slow',1); 
 
     } 
 
    }

<style> 
 
    .fade{display: block;} 
 
</style>

<html> 
 
<head> 
 
    <title></title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<p>Fade Out Example</p><br> 
 
<div class="fade" id="div1" style="background-color:red;width:100px; height:100px" onmouseover="demo('1');" onmouseout="demo1('1')"> </div><br> 
 
<div class="fade" id="div2" style="background-color:blue;width:100px; height:100px" onmouseover="demo('2');" onmouseout="demo1('2')"> </div><br> 
 
<div class="fade" id="div3" style="background-color:cyan;width:100px; height:100px" onmouseover="demo('3');" onmouseout="demo1('3')"> </div> 
 

 
</body> 
 

 

 
</html>

來源

2016-06-17 10:09:50 Regolith

這可以幫助你@Priyanka孔雀，

$(document).ready(function(){ 

    $('div.fade').mouseenter(function(){ 
     $(this).animate({ 
     opacity: '0.2' 
    },1500); 
    }); 
    $('div.fade').mouseleave(function(){ 
     $(this).animate({ 
     opacity: '1' 
    },1500); 
    }); 

});

來源

2016-06-17 09:06:17 Samir

否...此代碼中也發生過同樣的問題' –

您的需求是「在鼠標輸入時，該div只顯示淡入淡出，其他div應該淡出」是正確的？ – Samir

是的......一次的效果應該是 –

@ Harish的JavaScript是正確的解決方案，但你會繼續看到這個問題是關係到顯示屬性。在動畫結束時將元素值display設置爲none，這意味着您的塊將重新排列並且鼠標離開當前塊並進入處理該塊的塊。

您將需要保留空間，以便整個元素不會摺疊以獲得您要查找的效果。

http://api.jquery.com/fadeout/#entry-longdesc

來源

2016-06-17 09:24:56 Maneesh

<html> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

</head> 
<body> 
<p>Fade Out Example</p><br> 
<div class="fade" id="div1" style="background-color:red;width:100px; height:100px"> </div><br> 
<div class="fade" id="div2" style="background-color:blue;width:100px; height:100px"> </div><br> 
<div class="fade" id="div3" style="background-color:cyan;width:100px; height:100px"> </div> 

</body> 
<script> 

$(document).ready(function(){ 
    $("#div1").click(demo()); 
    $("#div2").click(demo2()); 
    $("#div3").click(demo3()); 
    }); 

function demo() 
{ 
$("#div1").mouseenter(function(){ 
     $("#div1").css("background-color","lightgreen").fadeOut(); 
    }); 
    $("#div1").mouseleave(function(){ 
$("#div1").css("background-color","red").fadeIn(); 
}); 
} 
function demo2() 
{ 
$("#div2").mouseenter(function(){ 
     $("#div2").fadeOut(); 
    }); 
    $("#div2").mouseleave(function(){ 
$("#div2").fadeIn(); 
}); 
} 
function demo3() 
{ 
$("#div3").mouseenter(function(){ 
     $("#div3").fadeOut(); 
    }); 
    $("#div3").mouseleave(function(){ 
$("#div3").fadeIn(); 
}); 
} 

    </script> 
</html>

來源

2016-06-17 09:29:47

在你點擊事件中，你想要mouseenter和mouseleave？ – Samir

不給點擊事件它沒有采取演示功能...但沒有點擊也使這些功能得到執行。你只需要做鼠標和鼠標在div ..這就是我想要的..Tell，如果它可能沒有使用點擊事件。 –

問題是，當你鼠標進入div正在淡出，並改變顯示無。因此，下面的div正在起牀。（即填充頂部div的區域）。而不是你可以使用CSS不透明。 – Samir

Fadein，fadeout事件一起使用jquery

回答

相關問題