我无法弄清楚这里出了什么问题。
我做了这个小提琴：http: //jsfiddle.net/iBertel/dyNxs/
它是通过为 jquery 添加一个中转脚本来解决的。你可以在这里下载一个：http ://ricostacruz.com/jquery.transit/
HTML
<section class="slider-panel red-background">
<div class="slider-caption-wrap">
<div class="rollOver"> <span class="rollOverSymbol">x</span>
<span class="rollOverSymbolBG"></span>
</div>
</div>
</section>
CSS
.slider-caption-wrap {
background-color: #333;
width:20%;
height: 20%;
position: absolute;
overflow: hidden;
bottom: 15%;
left:15%;
}
.rollOver {
position: absolute;
z-index: 5;
width: 100%;
height: 100%;
background: url("../img/overlayDottyDark.png") repeat scroll 0px 0px rgba(200, 57, 59, 0.8);
overflow: hidden;
opacity: 0;
}
.rollOverSymbol {
position: absolute;
z-index: 5;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
display: block;
height: 100px;
width: 100px;
background-color: rgb(148, 41, 43);
border-radius: 50% 50% 50% 50%;
text-align: center;
line-height: 100px;
font-size: 72px;
color: rgb(255, 255, 255);
}
.rollOverSymbolBG {
position: absolute;
z-index: 4;
left: 50%;
top: 50%;
margin-left: -60px;
margin-top: -60px;
display: block;
height: 120px;
width: 120px;
background-color: rgb(204, 72, 75);
border-radius: 50% 50% 50% 50%;
}
查询
$(".slider-caption-wrap").hover(
function () {
$(".rollOver", this).css({
opacity: 1
});
$(".rollOverSymbolBG", this).stop().transition({
scale: 1
}, 1400, 'easeOutCirc');
$(".rollOverSymbol", this).stop().transition({
scale: 1,
rotate: '0deg'
}, 500, 'easeOutCirc');
},
function () {
$(".rollOverSymbolBG", this).stop().transition({
scale: 4
}, 600, 'easeOutCirc');
$(".rollOverSymbol", this).stop().transition({
scale: 2,
rotate: '-45deg'
}, 600, 'easeOutCirc');
$(".rollOver", this).stop().transition({
opacity: 0
}, 300);
});