Response title
This is preview!
fadeIn() and fadeOut() problem
in Using jQuery
•
11 years ago
I am using the fadeIn() function to show and image and its close button--which is just a p tag inside of a div. The code works perfectly the first time but after you click the close button to hide the image and the close button, the close button never comes back. If you try to click on the button to show the image, only the image appears, not the close button and the image is basically stuck there.
Any suggestions would be very helpful.
Here is the link http://www.lesangbleu.com/look1.html
And here is the code
<div id="line2">
<p>VIEW THE SKETCH</p>
</div>
<div class="close">
<p>CLOSE</p>
</div>
<div id="bar_bottom">
<img src="images/bar_bottom.png"/>
</div>
<div class="rollover2" id="order">
<a href="#"></a>
</div>
<div id="size" style="display: none">
<p id="price_tag"> PRICE: </p>
<p id="price"> $625 </p>
<p id="size_tag">SIZES AVAILABLE: </p>
<p id="small">XS S M L </p>
<a href="javascript:open_smallwindow('chart.html')" id="size_chart">SIZE CHART</a>
<p id="color">COLORS AVAILABLE: </p>
<img src="images/pink_thumb.png" img id="color1">
<div class="rollover" id="purchase">
<a href="http://lesangbleu.pinnaclecart.com/collection-1/vela/"></a>
</div>
</div>
<script type="text/javascript">
/* COLOR SWATCH 1 */
$("#color1").mouseover(function () {
$("#color1_large").show();
});
$("#color1").mouseout(function () {
$("#color1_large").hide();
});
$('#line2').click(function() {
$('#sketch').fadeIn('slow');
});
$('#line2').click(function() {
$('.close').fadeIn('slow');
});
$(".close").click(function () {
$("#sketch").fadeOut("slow");
});
$(".close").click(function () {
$(".close p").fadeOut("slow");
});
</script>
1