在jquery中为不透明度和背景位置添加动画效果

Question

我有一个博客（博客）。在我的帖子中，悬停时，我有链接（永久链接，喜欢等）使用-webkit过渡来更改它们的位置和不透明度。但是我想使用 jquery 而不是 -webkit-transitions 来工作。我在jquery中开发了一些代码，你能在这里给我一点帮助来完成它吗？

这是我开始的代码： JsFiddle

提前致谢

Answer 1

希望这会有所帮助：

js小提琴演示

jQuery （v： 1.8.0）

$('#entry ').on('mouseenter mouseleave', function( event ){
    var $image = $(this).find('img.photo');
    var eTyp = event.type=='mouseenter'?         // if event IS 'mouseenter'
        $image.stop().fadeTo(400, 0.5) :         // do that,
        $image.stop().fadeTo(300, 1)   ;         // else, do this.
    $('#switch > div').stop(1).each(function(i){ //.stop(1) is to prevent animation buildups on fast mouse movements
        eTyp = event.type=='mouseenter' ?        // same events trick here. 
        $(this).delay(60*i).animate({top:   0, opacity: 1}, 400):
        $(this).delay(70*i).animate({top: 150, opacity: 0}, 300);          
    });  
});

.HTML：

<div id="entry">
    <div id="switch">
        <div id="b1"></div>
        <div id="b2"></div>
        <div id="b3"></div>
        <div id="b4"></div>
    </div>
</div>

.CSS：

#entry{position:absolute;width:490px;height:auto;background-color:#000}
#switch{
    position:absolute; /* to remove large black bottom space */
    top:50%;           /* if buttons holder is at 50% than we just need to push the buttons down! */
    margin:0 auto;
    width: 116px;
    left:187px; /* just a bit of math to center it :) */
    height: 25px;
    background-repeat: no-repeat;
}
/* buttons */
#switch > div{
    cursor:pointer;
    opacity:0;
    position:relative;
    float:left;
    top:150px;
    width: 25px;
    height: 25px;
    margin:0px 2px;
    background-image: url(http://static.tumblr.com/dbek3sy/Oufm2q70l/lightglass_icons.png);
}
#switch > div:hover{
    opacity:0.3;      
}
#b1{background-position: 0    0;}
#b2{background-position: 75px 0;}
.b3{background-position: 50px 0;}
.b4{background-position: 25px 0;}
#entry img{
    width:100.01%;         /* 100.01 to fix M.Firefox images width glitch */
    vertical-align:middle; /* to remove bottom extra space */
}