Question

i have a blog (BLOG) . In my posts, on hover I have the links (Permalink, Like, etc) changing their positions and opacity, using -webkit-transitions. But I want to use jquery instead of -webkit-transitions to work in ie.. I developed a little code in jquery, could you give me a little help here to finish it please ?

Here is the code I started : JsFiddle

Thanks in advance

Answer 1

Hope this will help:

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