鼠標移過多個圖片文件時的動畫

我試圖用鼠標移動圖片時使用jquery動畫3個PNG文件我找到了帶有文本的示例。我嘗試修改html：鼠標移過多個圖片文件時的動畫

<div class="img3"><img src=cat1.png></div> 
<div class="img3"><img src=cat2.png></div> 
<div class="img3"><img src=cat3.png></div>

但這並不奏效。

<script src="jquery-1.10.2.min.js"></script> 
<script> 
$(document).ready(function() { 
    $('.hover_me').hover(function() { 
     $('.img5').fadeOut(5000, function() { 
      $('.img4').fadeOut(5000, function() { 
       $('.img3').fadeOut(5000); 
      }); 
     }); 
    }); 
}); 
</script> 


<link rel="stylesheet" href="style.css" type="text/css"> 

<body> 
    <div class="hover_me">Hover me</div> 
    <div class="container"> 
     <div class="img3">3</div> 
     <div class="img4">4</div> 
     <div class="img5">5</div> 
    </div><!--/container--> 
</body>

CSS：

.hover_me { 
    color: red; 
    font-weight: bold; 
} 

.container { 
    border: 1px solid #000000; 
    position: relative; 
    display: block; 
    width: 100px; 
    height: 100px; 
    margin: 0px auto; 
} 

.container div { 
    position: absolute; 
} 

.img3 { 
    display: block; 
    width: 100px; 
    height: 100px; 
    background-color: #E5A932; 
} 

.img4 { 
    display: block; 
    width: 100px; 
    height: 100px; 
    background-color: #DC25ED; 
} 

.img5 { 
    display: block; 
    width: 100px; 
    height: 100px; 
    background-color: #15EFD6; 
}

來源

2013-09-23 user2806845

「但沒有按科技工作」它正常工作，所以你能指望什麼？ –

嗨，我試圖做的是： <鏈路的rel = 「樣式表的」 href = 「style.css文件」類型= 「文本/ CSS」>

Hover me

<！ - /容器 - > – user2806845

我有一些問題發佈...對不起 – user2806845

這是你在找什麼？

我不知道爲什麼你不能得到它的工作。上面的代碼完美地工作。可能是你沒有正確包括jquery。你必須包括jQuery的是這樣的：如果你沒有在你的根該文件

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script>

。

小提琴這裏：http://jsfiddle.net/hpZwZ/1/

來源

2013-09-23 10:59:44 aelor

鼠標移過多個圖片文件時的動畫

回答

相關問題