在.jlick上使用.click和.fadeTo

我正在嘗試對一組3張圖片進行分層，以使它們彼此重疊。當我「mouseenter」我想讓頂級照片淡出，然後當我「mouseleave」我想它重新出現。我得到了這個功能。那麼我希望能夠在「mouseenter」之後點擊並使第二張照片消失，以便我可以看到第三張照片。之後，我希望所有照片都能重新出現，並且無論有多少次mouseenter，mouseleave和click都可以繼續使用該功能。我已經完成了它的工作，以便頂部照片消失並重新出現，然後當我點擊我看到第三張照片時，但是當我滑過鼠標時，我看到第一張照片，而當我再次滑入時沒有任何反應。有人能幫我弄清楚如何完成我想要做的任務嗎？到目前爲止，我有這個作爲我的HTML：在.jlick上使用.click和.fadeTo

<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>

這是我的CSS：

.colosseumNow{ 
    min-width:400px; 
    min-height:400px; 
    max-width:400px; 
    max-height:400px; 
    margin-top:-300px; 
    } 
    .colosseumRest{ 
    min-width:400px; 
    min-height:400px; 
    max-width:400px; 
    max-height:400px; 
    margin-top:-200px; 
    } 
    .colosseum{ 
    min-width:400px; 
    min-height:400px; 
    max-width:400px; 
    max-height:400px; 
    postition:absolute; 
    }

這是我的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); 
}); 

    });

來源

2013-10-14 user2868727

沒關係，嘗試一些不同的東西后，我發現我可以做這樣做： $（文件）。就緒（函數（）{（'。colosseumNow'）。mouseenter（function（）{ \t \t $（this）.fadeTo（'slow'，0）; \t}）; \t $（ 'colosseumNow。 '）鼠標離開（函數（）{ \t \t $（本）.fadeTo（' 慢'，1）; \t}）。 \t $（ 'colosseumNow。 '）點擊（函數（）{ \t \t $（' colosseumRest。 '）fadeTo（' 慢'，0）; \t}）。 \t $（ 'colosseumNow。 '）鼠標離開（函數（）{ \t \t $（' colosseumRest。 '）fadeTo（' 慢'，1）; \t}）。 }）; – user2868727

最簡單的辦法我能想到的是做一個父母的div，然後使用兄弟姐妹淡入或淡出所有的孩子使用

$（兄弟姐妹）.fadeTo（ '慢'，1）

http://api.jquery.com/siblings/

來源

2013-10-14 01:36:08 Akash

在.jlick上使用.click和.fadeTo

回答

相關問題