CODEWITHSUNDEEP
javascriptjquerycssfadeout
сами J.D.
сами J.D.

Reputation: 513

Display block after fadeout or fadein after fadeto

When I click on an image I want a div to fadein and then fadeout. This div should always occupy the same space (display: block). If I click again, I want this div to reappear.

Can't achieve this. If I use fadeOut(), an inline style display:none is added. If I use fadeTo(), the div is hidden without occupying its space.

How do I have to do it?

Code:

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

Adding all the code would be too messy and irrelevant. The important part is in 

function Actions(sms, tipus)

as here is where I fadein and fadeout...

I have read lots about this but can't make my code to work.

THANKS!

Upvotes: 1

Views: 433

Answers (2)

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10093

Please try this code. On first click on the img, the div fades out. On clicking again, it fades back in.

Update: Now if you want the div to be faded out initially, you just need to add the class gone manually at the start. Because that is the class that causes the div to have zero 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>

Upvotes: 1

SteamDev
SteamDev

Reputation: 4414

I'm on my phone, so unable to provide a code example, but try animating the opacity with CSS by adding/removing a class.

Upvotes: 0

Related Questions