jquery - jqueryで不透明度と背景位置をアニメーション化する

Question

私はブログ（BLOG）を持っています。私の投稿では、ホバー時に、-webkit-transitionsを使用して、リンク（Permalink、Likeなど）の位置と不透明度を変更しています。しかし、-webkit-transitionsの代わりにjqueryを使用して、つまりで動作させたいと思います。jqueryで小さなコードを開発しました。ここで少し助けて、完成させてください。

これが私が始めたコードです：JsFiddle

前もって感謝します

Answer 1

これがお役に立てば幸いです。

jsFiddleデモ

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 */
}