用于悬停效果的Jquery？
用于悬停效果的Jquery？
提问于 2014-07-29 07:49:28
我发现这段代码是为了在图像上获得悬停效果。我工作得很好，但我需要创建其他动画，我只是想知道使用jquery是否可以缩短js代码，并获得相同的(或类似的)效果。
，它必须有反应。。
I还需要IE9和IE10.的退路。
小提琴：http://jsfiddle.net/J28Yp/3/
html
<div id="container">
<div class="inner">
<div class="desc">Milo went to the wood. He took a fun ride and never came back</div>
<div class="title">Faithful<strong>Milo</strong></div>
<!--img class="photo" src="http://tympanus.net/Development/HoverEffectIdeas/img/11.jpg" /-->
<div class="photo"></div>
</div>
css
#container {
position: relative;
display: inline-block;
overflow: hidden;
margin: -0.135em;
width: 450px;
height: 350px;
text-align: center;
cursor: pointer;
background: #2e5d5a;
}
#container .photo {
height: 400px;
width: 500px;
left:-5%;
top:-20px;
position: relative;
background:url('http://tympanus.net/Development/HoverEffectIdeas/img/11.jpg') no-repeat center center;
}
.desc {
font-size: 14px;
top: 60px;
width: 210px;
text-align: right;
left: 20px;
padding-right: 10px;
border-right: 1px solid;
opacity:0;
}
.title {
font-size:30px;
bottom: 20px;
right: 40px;
}
.desc,
.title {
position: absolute;
z-index:2;
color: #ffffff;
font-family: Arial;
text-transform: uppercase;
}js
//window.onload = function() {
var photo = $("#container .photo");
var desc = $("#container .desc");
var inner = $("#container .inner");
var myTween = new TweenLite(
photo,
0.3,
{scale:1, opacity:0.5, paused: true}
)
var myTween2 = new TweenLite(
desc,
0.3,
{x:10, y:-20, opacity:1, paused: true}
)
inner.hover(
function () {
myTween.play();
myTween2.play();
},
function () {
myTween.reverse();
myTween2.reverse();
}
);
inner.mouseOut
}回答 1
Stack Overflow用户
回答已采纳
发布于 2014-07-29 08:05:59
下面是您代码的最短版本(不使用JS!)，只使用CSS：
#container:hover .photo {
transition: .3s all linear;
transform: matrix(0.95, 0, 0, 0.95, 0, 0);
opacity: 0.5;
}
#container:hover .desc {
transition: .3s all linear;
margin: -20px 0 0 10px;
opacity: 1;
}注意:将转换规则移动到非悬停状态，以使鼠标运行。
请看这里：http://jsfiddle.net/shomz/J28Yp/18/
更多跨浏览器友好型：http://jsfiddle.net/shomz/J28Yp/19/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25010515
复制相关文章
相似问题
腾讯云开发者
