图像hoverjquery效果

那里。 我正在尝试的是这个：

$(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://sofzh.miximages.com/javascript/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）表示单击的元素，因此动画不适用于具有相同类的所有元素。