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

Question

当我单击图像时，我希望 div 淡入然后淡出。此 div 应始终占用相同的 space (display: block)。如果我再次单击，我希望这个 div 重新出现。

无法实现。如果我使用 fadeOut()，则会添加内联样式 display:none。如果我使用 fadeTo()，div 会被隐藏而不占用它的 space。

我该怎么做？

代码：

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

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


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

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

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

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

<body>

 <div class="warningboxes" id ="warningboxes" name="warningboxes"> Info message</div>
 <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)

这里是我淡入淡出的地方...

我已经阅读了很多关于此的内容，但无法使我的代码正常工作。

谢谢！

Answer 1

我正在 phone，因此无法提供代码示例，但请尝试通过 adding/removing a class.[= 使用 CSS 设置不透明度动画。 10=]

Answer 2

请尝试此代码。第一次单击 img 时，div 会淡出。再次单击时，它会淡入。

更新：现在如果你想让div开始淡出，你只需要手动添加class gone在开始时。因为那是导致 div 为零的 class 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>

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

Display block after fadeout or fadein after fadeto

javascript

css

jquery

fadeout