HundleyDeveloping.com/work/
出于某种原因，如果我通过鼠标悬停播放一个动画，它可以正常工作，但是直到我刷新另一个动画才会播放。
jQuery
$(".image-container").hover(
function() {
$(".image").animate({ height: "400", width: "574"}, "fast");
$(".image").css("z-index", "2");
$(".image-container-two").css("z-index", "1");
$(".caption").stop().fadeOut("fast");
}, function() {
$(".image").animate({ height: "200", width: "287"}, "fast");
$(".image").css("z-index", "0");
$(".image-container-two").css("z-index", "0");
$(".caption").fadeIn("fast");
}
);
$(".image-container-two").hover(
function() {
$(".image-two").animate({ height: "400", width: "462"}, "fast");
$(".image-two").css("z-index", "2");
$(".image-container").css("z-index", "1");
$(".caption-two").fadeOut("fast");
}, function() {
$(".image-two").animate({ height: "200", width: "231"}, "fast");
$(".image-two").css("z-index", "0");
$(".image-container").css("z-index", "0");
$(".caption-two").fadeIn("fast");
}
);
CSS
.image-container {
text-align: center;
position: absolute;
border: 3px outset #666666;
background-color: #ffffff;
z-index: 2;
}
.image-container-two {
text-align: center;
position: absolute;
border: 3px outset #666666;
background-color: #ffffff;
left: 325px;
z-index: 1;
}
.image {
z-index: inheit;
width: 287px;
height: 200px;
margin: 5px;
margin-right: 3px;
}
.image-two {
z-index: inheit;
width: 231px;
height: 200px;
margin: 5px;
margin-right: 3px;
}
.caption {
z-index: inherit;
background-color: #000000;
width: 287px;
height: 30px;
opacity:0.7;
filter:alpha(opacity=70);
margin: 5px;
margin-top: -40px;
color: #ffffff;
display: block;
font-family: Perpetua, Baskerville, "Big Caslon", "Palatino Linotype", Palatino, "URW Palladio L", "Nimbus Roman No9 L", serif;
font-size: 20px;
word-wrap: break-word;
line-height: 30px;
}
.caption-two {
z-index: inherit;
background-color: #000000;
width: 231px;
height: 30px;
opacity:0.7;
filter:alpha(opacity=70);
margin: 5px;
margin-top: -40px;
color: #ffffff;
display: block;
font-family: Perpetua, Baskerville, "Big Caslon", "Palatino Linotype", Palatino, "URW Palladio L", "Nimbus Roman No9 L", serif;
font-size: 20px;
word-wrap: break-word;
line-height: 30px;
}
HTML
<div class="image-container">
<img src="../images/templateone.jpg" class="image" alt=""/>
<br />
<span class="caption">Template #1</span>
</div>
<div class="image-container-two">
<img src="../images/templatetwo.jpg" class="image-two" alt=""/>
<br />
<span class="caption-two">Template #2</span>
</div>
请帮忙！无法弄清楚为什么这些元素似乎彼此“嫉妒”。