I am currently working on a project that involves creating a lightbox effect. I am using jQuery's fadeIn and fadeOut functions to display enlarged div elements. However, I have encountered an issue - when I use fadeOut on the enlarged div, the smaller one also disappears because fadeOut sets display: none upon completion. Is there a way to apply fadeIn and fadeOut to a copy of a div without affecting the original? It is important to note that this particular div does not contain an image but rather a large set of other divs and text.
Here's the snippet of my current jQuery code:
$("#magnify").on("click", function(event){
$("#black-overlay").addClass("show");
$(".close").addClass("show");
$("#inner-box").addClass("enlarge").fadeIn(600);
});
$(".close").on("click", function(event){
$("#inner-box").fadeOut(600);
});
The complete HTML structure is quite lengthy, so here's a simplified version. Essentially, I want everything within the inner-box to enlarge as well as fade in and out when specific elements are clicked:
<div id="outter-box" class="activeSlide">
<div id="magnify"><a href="#"><p>Enlarge</p></a></div>
<div id="inner-box">
<div class="close">
<a href="#"><img src="img/close.gif" width="22px" height="22px" /></a>
</div>
<div id="content">
<div class="inside">
<p>A lot of content here</p>
</div>
</div>
</div>
</div>