javascript - 淡出后显示 block 或淡入淡出后显示 block-6ren

javascript - 淡出后显示 block 或淡入淡出后显示 block

转载作者：行者123 更新时间：2023-11-28 16:12:05

25

4

当我单击图像时，我希望 div 淡入然后淡出。这个 div 应该总是占据相同的空间 (display: block)。如果我再次点击，我希望这个 div 重新出现。

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

我该怎么做？

代码:

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)

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

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

谢谢!

最佳答案

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

关于javascript - 淡出后显示 block 或淡入淡出后显示 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38185658/

25

4

0

文章推荐： javascript - 如何将 jquery 代码转换为可重用的插件/函数

文章推荐： javascript - 在表行中选中复选框时启用文本框

文章推荐： css - 如何使用 CSS 并排对齐三个图像

文章推荐： javascript - 在页面加载时隐藏 ul

linux - pull 入 git 存储库时权限被拒绝
我似乎对 git 存储库有权限问题。当我 pull 入一个不是我的 Linux 用户创建的目录时，我出现了这个错误。 fatal: Unable to create '/home/---/.git/
Git pull 入 "remote"目录
在 Git 中，您可以将给定目录克隆到给定目录: git clone ssh://gitolite@dev.bipper.com:3687/com/bipper/kids/portal 当我运行我们
git - 如何防止从与当前分支不同的地方 pull 入 git
目前，如果您在分支 V2 中并执行“git pull origin V3”，它会将 V3 merge 到 V2，甚至不会发出警告或提示。这个选项可以以某种方式被阻止吗？我在这里阅读了所有类似的问题，人
java - 一致性缓存 | ConcurrentHashMap 入，HashMap 出
我刚开始使用 Oracle 的 Coherence 缓存，我注意到这一点:如果我在缓存中放入一个 ConcurrentHashMap 对象，当我检索它时，我可以看到它被转换为一个普通的 HashMap
git - 在 pull 入 Git 之前我必须提交我的更改吗？
看起来我缺少对 git pull 和 git commit 的基本理解，假设我在分支上工作，而它在我更新时被其他开发人员更新了在本地做我的工作。我应该在发出 git pull 之前提交更改，还是应该执
Git 子模块。 pull 入 super 项目的新克隆
好的。所以我以为我已经舔过了……但现在…… 我有一个项目，其中包含一个来自 GitHub 的小型库作为子模块。在该 super 项目的原始版本中，子模块按预期工作。但是，我只是克隆了 super 项
git - 如何将特定远程 pull 入 VS Code 中的当前分支
使用 Visual Studio Code 中的内置 Git，我看不到将指定的远程分支 pull 入当前分支的方法。我可以这样做吗？示例:我正在分支 myBranch 上工作，更改已 merge 到
linux - 提交或 pull 入 git 时出现总线错误(核心已转储)
当我尝试提交或 pull 此错误时 Bus error (core dumped) 发生了! 当我用 gdb 调试它时，(gdb git,run commit -a,where) 结果是: mucul
ruby-on-rails - rake 入 Rails : should I be using db:reset?
我对默认 Rails Rake 任务的预期用途有点困惑，想咨询一下我是否应该使用 db:reset或编写自定义 Rake 任务。没什么聪明的，只是日常管理，而且我很可能会错过一个明显的文档，因为我是
git - 如何避免在 git reset --hard 之后 pull 入 git
所以我做了: git reset --hard #commithash # make a bunch of changes, fixes and so on. git add -A git commi
git - 有没有办法从 git repo 直接 pull 入 firebase 托管网站
我已使用以下命令成功部署到 firebase 托管应用: firebase init firebase deploy 在这个阶段，我正在执行 git pull 以将 repo 下 pull 到暂存服务
eclipse - 在 Eclipse 中 pull 入 git 存储库时出现 "Could not get advertised Ref for branch..."错误
当尝试在 Eclipse 的 git 存储库中 pull (团队|从上下文菜单中 pull )时，出现 Could not get advertised Ref for branch refs/hea

首页

博学

6Ren·AI

商城

javascript - 淡出后显示 block 或淡入淡出后显示 block