페이드 아웃 후 페이딩 또는 페이드 후 디스플레이 블록

이미지를 클릭하면 div가 페이드 인 된 다음 페이드 아웃됩니다. 이 div는 항상 같은 공간 (display: block)을 차지해야합니다. 다시 클릭하면이 div가 다시 나타납니다.페이드 아웃 후 페이딩 또는 페이드 후 디스플레이 블록

이것을 수행 할 수 없습니다. fadeOut()을 사용하는 경우 인라인 스타일 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)'> 
 
     ....

이 너무 지저분와 관련이없는 것 모든 코드를 추가. 중요한 부분은 이것에 대해 많이 읽고 있지만, 내 코드가 작동 할 수 없습니다

... 어디 fadein I 및 페이드 아웃으로 여기

function Actions(sms, tipus)

입니다.

고맙습니다!

출처

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

이 코드를 사용해보십시오. img을 처음 클릭하면 div이 희미 해집니다. 다시 클릭에, 그것을 다시 페이드

업데이트 :.는 이제 DIV가 처음에 페이드 아웃되도록하려면, 당신은 단지 시작에 수동으로 클래스 gone를 추가해야합니다. 그 이유는 div이 0이되도록하는 클래스이기 때문입니다. 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

는 동일하지만 그것을 볼 만들기 다음 숨겨진 시작하고 어떻게해야합니까 ... 좋은 보이지만 그것을 밖으로 정렬 할 수 없습니다 아직? visible-> hidden-> visible 대신에? 감사. 잠깐, 내가 가지고 있다고 생각하고, 좀 더 시험을 봐야 해. 방금 귀하의 답변을 보았습니다 (귀하가 업데이트하려고합니다). 다시 한 번 감사드립니다! –

이 코드를 업데이트하겠습니다. –

감사합니다. 매우 유용합니다! –

나는 휴대 전화를 사용 중이므로 코드 예제를 제공 할 수 없지만 클래스를 추가/제거하여 CSS로 불투명도를 애니메이트 해보십시오.

출처

2016-07-04 13:19:00 SteamDev

페이드 아웃 후 페이딩 또는 페이드 후 디스플레이 블록

답변

관련 문제