Question

那边是Hy。我正在尝试的是：

$(document).ready(function() {
$('.wrapper').hover(function() {
$('.image', this).animate({width:"110%",opacity:"0.5"}{duration:100,queue:false});
$('h4',this).animate({ margin-left: "10px"} {duration:300,queue:false});
$('p',this).animate({ margin-left: "40px", display: "block"} {duration:200,queue:false});
}); 
});

http://jsfiddle.net/ygqouhk1/

但问题是它不起作用，有时候它会将动画应用于具有相同类的所有div，并且在鼠标离开后它不会恢复到正常状态。我对jquery不是很好，但是我想在jquery中制作类似css效果的东西。它一定不能完全像这个，只是类似我稍后会尝试调整位置和颜色：

http://jsfiddle.net/shomz/J28Yp/19/

#container .photo {
    transition: .3s all linear;
    height: 400px;
    width: 500px;
    left:-5%;
    top:-20px;
    position: relative;
    background:url('http://tympanus.net/Development/HoverEffectIdeas/img/11.jpg') no-repeat center center;

}

#container:hover .photo {
    transform: matrix(0.95, 0, 0, 0.95, 0, 0);
    opacity: 0.5;
}

#container:hover .desc {    
    margin: -20px 0 0 10px;
    opacity: 1;
}

.desc {
    transition: .3s all linear;
    font-size: 14px;
    top: 60px;
    width: 210px;
    text-align: right;
    left: 20px;
    padding-right: 10px;
    border-right: 1px solid;
    opacity:0;
    margin: 0;
}

.title {
    font-size:30px;
    bottom: 20px;
    right: 40px;
}

.desc,
.title {
    position: absolute;  
    z-index:2;
    color: #ffffff;
    font-family: Arial;
    text-transform: uppercase;
}

有什么想法吗？

Answer 1

$('.image').hover(
            function() {
                $(".rollOver", this).fadeIn();
            },
            function() {
                $(".rollOver", this).fadeOut();
            }
        );

您需要此代码。在这里检查完整的演示＆＃34; http://jsfiddle.net/SaurabhGhewari/oLrpL3wy/3/＆＃34;

Answer 2

$('.wrapper').hover(function(e) {
    $(e.target).animate({width:"110%",opacity:"0.5"}{duration:100,queue:false});
});

$（e.target）表示单击的元素，因此动画不适用于具有相同类的所有元素。

图像悬停jquery效果

2 个答案: