Fading In And Out An Image Using Javascript

I have the code right so that when I click the image link jquery puts the image where it should be and at the proper size. However, I can't figure out what code to use in the javas

Solution 1:

Not sure if this is what you are asking for?

$(document).ready(function() {
    $('img').click (function() { 
        var image = ('<img src="deal_content.fw.png" width="700px" height="500px" alt="Deals" />')
        $('.deal_content').html(image).hide().fadeToggle();   
    });
});

Solution 2:

A simple if should be able to detect if there's already an image inside your element:

<script type="text/javascript">
$(document).ready(function() {
    $('img').click (function() { 
        if ($('.deal_content img').length > 0) {
            $('.deal_content img').remove();
        } else {
            $('.deal_content').append('<img src="deal_content.fw.png" width="700px" height="500px" alt="Deals" />');
        }
        return false;   
        $('img').fadeToggle([normal]); 
    });
});
</script> 

Solution 3:

The following fade toggles the current clicked image. In this case you need to use a delegated event (see documentation) to make it work on images that are appended dynamically.

$(document).ready(function() {
    $('.deal_content').on("click", "img", function() { 
        $(this).fadeToggle("normal"); 
    });
});

Then add a separate event handler for your link to append the images:

$('#imagelink a').click(function() { 
     $('.deal_content').append('<img src="deal_content.fw.png" width="700px" height="500px" alt="Deals" />');
    return false;
});