Question

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

以下是我开始的代码：JsFiddle

提前致谢

Answer 1

希望这会有所帮助：

jsFiddle demo

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

在jquery中设置不透明度和背景位置的动画

1 个答案:

jsFiddle demo