图片悬停jquery效果 [英] Image hover jquery effect

问题描述

Hy there。
我想要的是：

Hy there. What I'm trying is this:

$(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/

但问题是它不工作，当它工作时有时它应用动画到所有divs与同一类，它不会回到正常状态后鼠标离开。我不是那么好的jquery，但我想做一些像这样css效果只是在jquery。它不一定是这样的，只是类似我会尝试调整位置和颜色后来：

But the problem is it doesn't work and when it works sometimes it applies the animations to all divs with the same class and it doesn't go back to normal state after mouse leave. I'm not so good with jquery but I would like to make something like this css effect just in jquery. It must not be exactly like this one, just similar I will try to tweak the positions and colors later on:

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;
}

任何想法？

推荐答案

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

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

You need this code. Check full demo here "http://jsfiddle.net/SaurabhGhewari/oLrpL3wy/3/"

这篇关于图片悬停jquery效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！