淡入淡出或淡入淡出后的显示块
问题描述:
当我点击图片时,我想要淡入淡出然后淡出。这个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)
因为这里是我淡入淡出和...
我看了很多关于这一点,但不能让我的代码工作。
谢谢!
答
请尝试此代码。首先点击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>
答
我在我的手机上,因此无法提供代码示例,但尝试通过添加/删除类为CSS添加动画效果。
看起来不错,但不能把它整理出来呢?你怎么做相同的,但开始隐藏,然后使其可见?而不是可见 - >隐藏 - >可见?谢谢。嗯,等等,我想我已经拥有了,还得做更多的测试。刚刚看到你的回答(你可以更新)。再次感谢! –
让我为此更新代码。 –
谢谢,非常有用! –