使用javascript淡入和淡出图像 [英] fading in and out an image using javascript

问题描述

我有正确的代码，因此当我单击图像链接时，jquery将图像放置在应有的位置并具有适当的大小.但是，我无法弄清楚在javascript中使用什么代码，因此当我再次单击该图像时.它将当前内容从div中删除，然后重新放回原处，而不是将图像重复放入div中?

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 javascript so that when I click the image again. It removes the current content from the div and puts it back in again instead of repeatedly putting the image in the div?

这是JavaScript代码:

Here is the javascript code:

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

这是正在起作用的HTML:

Here is the HTML it is effecting:

<div class="deal_content">

</div>
<div id="content">
    <div id="imagelink"> 
        <a href="#">
            <img src="for_men_btn.fw.png" width="200" height="87" alt="For Men" />
        </a>
        <a href="#">
            <img src="for_couples_btn.fw.png" width="200" height="87" alt="For Couples" />
        </a>    
        <a href="#">
            <img src="for_teens_btn.fw.png" width="200" height="87" alt="For Teens" />
        </a>
    </p>

</div>

推荐答案

不确定这是您要的吗?

$(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();   
    });
});

这篇关于使用javascript淡入和淡出图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！