javascript - 图片悬停jquery效果

Question

你好。我正在尝试的是:

$(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();
            }
        );

您需要此代码。在此处查看完整演示“http://jsfiddle.net/SaurabhGhewari/oLrpL3wy/3/”