Question

我发现此代码可以在图像上获得悬停效果。我工作正常，但我需要创建其他动画，我只是想知道js代码是否可以使用jquery更短并获得相同（或类似）的效果。

必须有回应。

我还需要IE9和IE10的后备。

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
}

Answer 1

这是您的代码的最短版本（不使用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/

Jquery悬停效果？

1 个答案: