淡入淡出或淡入淡出後的顯示塊

當我點擊圖片時，我想要淡入淡出然後淡出。這個div應該總是佔據相同的空間（display: block）。如果我再次點擊，我想這個div重新出現。淡入淡出或淡入淡出後的顯示塊

無法實現此目的。如果我使用，則會添加內聯樣式display:none。如果我使用fadeTo()，則div不會佔用其空間。

我該如何做？

代碼：

function edit(oneid) 
 
{ 
 
    AvisEdit(oneid); 
 
    } 
 

 
function AvisEdit(oneid) 
 
{ 
 
\t var nom = $('#X'+oneid+' .Nom').text(); 
 
\t ShowAlerts("Ara pots editar el valor dels camps de '"+nom+"'", 2); 
 
} 
 

 

 
function ShowAlerts(sms, code) 
 
{ 
 
\t switch(code) 
 
\t { 
 
\t \t case 0: 
 
\t \t \t Actions(sms, "success"); 
 
\t \t \t break; 
 
\t \t 
 
\t \t case 1: 
 
\t \t \t Actions(sms, "error"); 
 
\t \t \t break; 
 
\t \t case 2: 
 
\t \t \t Actions(sms, "info"); 
 
\t \t \t break; 
 
\t } 
 
} 
 

 
function Actions(sms, tipus) 
 
{ 
 
\t $("#warningboxes").toggleClass(tipus); \t // Add class 
 
\t $('#warningboxes').css('visibility','visible').hide(); \t \t // start hidden to fadein 
 
\t $("#warningboxes").html(sms); // add message in div 
 
\t $("#warningboxes").fadeIn(1500, function() // show up 
 
\t \t { 
 
\t \t \t setTimeout(function() 
 
\t \t \t { 
 
\t \t \t \t $('#warningboxes').fadeOut(1500, 0); // dissapears but removes space of div #warningboxes; with fadeto(), fadein won't work anymore 
 
\t \t \t }, 1500) 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t setTimeout(function() 
 
\t \t \t { 
 
\t \t \t \t BackToStd(tipus); // remove the properties added so it still works 
 
\t \t \t \t 
 
\t \t \t }, 3000); 
 
\t \t } \t \t \t 
 
\t); 
 
} 
 

 
function BackToStd(tipus) 
 
{ 
 
\t $('#warningboxes').toggleClass(tipus); 
 
\t $('#warningboxes').css(
 
\t \t { 
 
\t \t \t display: "block", 
 
\t \t \t opacity: "", 
 
\t \t \t filter: "", 
 
\t \t \t zoom: "", 
 
\t \t \t visibility: "" 
 
\t \t } 
 
\t); 
 
}

.warningboxes 
 
{ 
 
\t border: 1px solid; 
 
\t margin: 10px 0px; 
 
\t padding:15px 10px 15px 50px; 
 
\t background-repeat: no-repeat; 
 
\t background-position: 10px center; 
 
\t visibility:hidden; 
 
\t display:block; 
 
} 
 
.info 
 
{ 
 
\t color: #00529B; 
 
\t background-color: #BDE5F8; 
 
\t background-image: url('../res/PNGICONS/KnobInfo.png'); 
 
} 
 
.success 
 
{ 
 
\t color: #4F8A10; 
 
\t background-color: #DFF2BF; 
 
\t background-image: url('../res/PNGICONS/KnobValidGreen.png'); 
 
} 
 
.warning 
 
{ 
 
\t color: #9F6000; 
 
\t background-color: #FEEFB3; 
 
\t background-image: url('../res/PNGICONS/KnobAttention.png'); 
 
} 
 
.error 
 
{ 
 
\t color: #D8000C; 
 
\t background-color: #FFBABA; 
 
\t background-image: url('../res/PNGICONS/KnobCancel.png'); 
 
}

<body> 
 

 
\t <div class="warningboxes" id ="warningboxes" name="warningboxes"> Info message</div> 
 
\t <table id="myid"> 
 
     .... 
 
     .... 
 
     ... 
 
     
 
     <img src='./res/edit.png' id='imagenok4' class='deleteAndOthers' OnClick='edit(4)'> 
 
     <img src='./res/edit.png' id='imagenok5' class='deleteAndOthers' OnClick='edit(5)'> 
 
     <img src='./res/edit.png' id='imagenok6' class='deleteAndOthers' OnClick='edit(6)'> 
 
     ....

添加所有的代碼將是太亂和不相關的。最重要的部分是在

function Actions(sms, tipus)

因爲這裏是我淡入淡出和...

我看了很多關於這一點，但不能讓我的代碼工作。

謝謝！

來源

2016-07-04 сами J.D.

請嘗試此代碼。首先點擊img，div淡出。再次點擊，它消失早在

更新：現在如果你想在div最初將被淡出，你只需要手動在開始添加類gone。因爲這是導致div零的opacity的類。

$("#fade-img").on("click", function(e){ 
 
    $("#fade-div").toggleClass("gone"); 
 
});//img click

#fade-div 
 
{ 
 
    background: green; 
 
    height: 200px; 
 
    transition: opacity 1s ease; 
 
    width: 200px; 
 
} 
 

 
#fade-div.gone 
 
{ 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<img id="fade-img" src="http://placehold.it/100X100" alt="" /> 
 
<div id="fade-div" class="gone"></div>

來源

2016-07-04 13:29:12

看起來不錯，但不能把它整理出來呢？你怎麼做相同的，但開始隱藏，然後使其可見？而不是可見 - >隱藏 - >可見？謝謝。嗯，等等，我想我已經擁有了，還得做更多的測試。剛剛看到你的回答（你可以更新）。再次感謝！ –

讓我爲此更新代碼。 –

謝謝，非常有用！ –

我在我的手機上，因此無法提供代碼示例，但嘗試通過添加/刪除類爲CSS添加動畫效果。

來源

2016-07-04 13:19:00 SteamDev

淡入淡出或淡入淡出後的顯示塊

回答

相關問題