圖像懸停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/ ”

Answer 2

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

$（e.target）表示單擊的元素，因此動畫不適用於具有相同類的所有元素。