在jQuery上使用.click和.fadeTo_Jquery

在jQuery上使用.click和.fadeTo

jquery

在jQuery上使用.click和.fadeTo,jquery,Jquery,我正在尝试将一组3张图片分层，使它们彼此重叠。当我“mouseenter”时，我希望上面的照片淡出，然后当我“mouseleave”时，我希望它重新出现。我让那个函数起作用了。然后，我想能够在我点击鼠标后，让第二张照片消失，这样我就可以看到第三张照片。之后，我希望所有的照片重新出现，并有功能继续工作，无论我有多少次鼠标输入，鼠标删除，并点击。我已经让它工作，使顶部的照片消失并重新出现，然后当我点击时，我看到第三张照片，但当我鼠标移动时，我看到第一张照片，当我再次鼠标移动时，什么也没有发生。有人能

我正在尝试将一组3张图片分层，使它们彼此重叠。当我“mouseenter”时，我希望上面的照片淡出，然后当我“mouseleave”时，我希望它重新出现。我让那个函数起作用了。然后，我想能够在我点击鼠标后，让第二张照片消失，这样我就可以看到第三张照片。之后，我希望所有的照片重新出现，并有功能继续工作，无论我有多少次鼠标输入，鼠标删除，并点击。我已经让它工作，使顶部的照片消失并重新出现，然后当我点击时，我看到第三张照片，但当我鼠标移动时，我看到第一张照片，当我再次鼠标移动时，什么也没有发生。有人能帮我弄清楚如何完成我想做的任务吗？到目前为止，我将此作为我的HTML：

    <html>
<head>
<title>this is a title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="programs.js"></script>
<link rel="stylesheet" type="text/css" href="10_10.css">
</head>
<body>
    <div class="colosseum">
        <img class="colosseum" src="http://library.thinkquest.org/CR0210200/ancient_rome/colosseum3.jpg"/>
    </div>
    <div class="colosseumRest">
        <img class="colosseumRest" src="http://www.robinurton.com/history/ancient/rome/ColoAbove.jpg"/>
    </div>
    <div class="colosseumNow">
        <img class="colosseumNow" src="http://hbarbosahistorybuff.edublogs.org/files/2010/11/colosseum2-1lgbsp7.jpg"/>
    </div>

</body>

这是我的javascript：

    $(document).ready(function(){
$('.colosseumNow').mouseenter(function(){
    $(this).fadeTo('slow',0);
});
$('.colosseumNow').mouseleave(function(){
    $(this).fadeTo('slow',1);
});
$('.colosseumNow').click(function(){
    $('.colosseumRest').fadeTo('slow',0);
});

    });

我能想到的简单方法是制作一个父div，然后使用兄弟姐妹来淡入或淡出所有使用

$（同级）.fadeTo（'slow'，1）

没关系，在尝试了几件不同的事情之后，我发现我可以通过以下方法来完成：$（document）.ready（function（）{$（'.coulseumnow'）.mouseenter（function（）{$（this.coulseumnow'）.mouseleave（function（）{$（this.fadeTo'slow'，1）；$（'.coulseumnow'）。单击（function（）{$（'.coulseumrest'）.fadeTo'slow'，0'）；}）；$（'.coulseumnow'）.mouseleave（function（）{$（'.coulseumrest'）.fadeTo（'slow'，1）；}）；}）；

    $(document).ready(function(){
$('.colosseumNow').mouseenter(function(){
    $(this).fadeTo('slow',0);
});
$('.colosseumNow').mouseleave(function(){
    $(this).fadeTo('slow',1);
});
$('.colosseumNow').click(function(){
    $('.colosseumRest').fadeTo('slow',0);
});

    });