图像悬停查询效果

Image hover jquery effect

本文关键字：查询 悬停 图像      更新时间：2023-09-26

那里。我正在尝试的是：

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

有什么想法吗？

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

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

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

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

相关文章：