淡入淡出或淡入淡出后的显示块

当我点击图片时，我想要淡入淡出然后淡出。这个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

淡入淡出或淡入淡出后的显示块

回答

相关问题