Question

当我点击图像时，我想要一个div来淡化，然后淡出。此div应始终占用相同的空间（display: block）。如果我再次点击，我希望这个div重新出现。

无法实现这一目标。如果我使用fadeOut()，则会添加内联样式display:none。如果我使用fadeTo()，则隐藏div而不占用其空间。

我该怎么做？

代码：

＆＃13;

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: ""
		}
	);
}

＆＃13;

.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');
}

＆＃13;

<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)'>
      ....

＆＃13;

添加所有代码太乱了，无关紧要。

中的重要部分

function Actions(sms, tipus)

因为这是我褪色和淡出的地方......

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

谢谢！

Answer 1

请尝试此代码。首次点击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>

Answer 2

我在手机上，因此无法提供代码示例，但尝试通过添加/删除类来为CSS添加不透明度。

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

2 个答案: