как получить такой же эффект наведения jquery для этих социальных значков?

Как получить такой же эффект jQuery при наведении (сглаживание), как в шаблоне блогера Epione?

Я пробовал так много способов разместить его в своем блоге, но я думаю, что я нуб в кодах анимации jQuery.

Буду очень признателен, если вы мне поможете в этом.

HTML-код

<div id='get_social'>
<div class='get_social_wrap'>
    <a class='follow_fb_link' href='http://www.facebook.com/facebook-id' title='follow us on facebook'/>
    <a class='follow_twitter_link' href='http://twitter.com/twetter-id' title='follow us on twitter'/>
    <a class='follow_rss_link' href='/feeds/posts/default' title='subscribe to our rss feed'/>

 </a></a></a></div>

CSS Code

#get_social{float:left; position:relative; margin:0px;}
.get_social_wrap{ position:relative; width:160px; margin-top:15px;}

.follow_fb_link{width:22px; height:22px; background:url(http://1.bp.blogspot.com/-cKUUmDR1mkw/ThsIt1kAzlI/AAAAAAAABOQ/PFgbBB1e0VQ/s1600/ep_fb.png) no-repeat; float:left; margin-right:7px;}
.follow_twitter_link{width:22px; height:22px; background:url(http://3.bp.blogspot.com/-ne3mIs7NGqk/ThsIuqNTIjI/AAAAAAAABOg/kIbh7Z9A96E/s1600/ep_twitter.png) no-repeat;  margin-right:7px; float:left;}
.follow_rss_link{width:22px; height:22px; background:url(http://4.bp.blogspot.com/-V_MuLwEucB0/ThsIuOcu7OI/AAAAAAAABOY/4jyEVTewJQM/s1600/ep_feed.png) no-repeat; margin-right:7px; float:left;}

Плагин облегчения jQuery

<script src='http://my-subtitles-blog.googlecode.com/svn/trunk/jquery.easing.1.3.js' type='text/javascript'/>

jquery social blogger easing rollover-effect
person Kariem Zaki    schedule 13.09.2011    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Все, что они делают, это имеют такую ​​​​картинку:

Значки FacebookЗначки Twitter введите здесь описание изображения

в качестве фона, а затем анимировать положение фона при наведении.

Вот соответствующий фрагмент кода с их сайта:

jQuery(function(){
    var easing = 'easeOutBounce';
    jQuery('.follow_fb_link, .follow_twitter_link, .follow_rss_link').css({backgroundPosition: '0px 0px'})
        .mouseover(function(){
            jQuery(this).stop().animate({backgroundPosition:'0 -22px'},200, easing)
        })
        .mouseout(function(){
            jQuery(this).stop().animate({backgroundPosition:'0 0'},200, easing)
        });
});
person Joseph Silber    schedule 13.09.2011

arrow_upward
1
arrow_downward

Что он делает, так это анимирует положение фона на теге и использует «эластичность» (я думаю). Так что это будет что-то вроде:

$('get_social_wrap a').hover(function(){
    $(this).stop().animate({
        backgroundPosition :  '50% 25px'
    }, 'easeInOutElastic');
}, function(){
    $(this).stop().animate({
        backgroundPosition :  '50% 0px'
    }, 'easeInOutElastic');
});

Узнайте больше о синтаксисе анимации и замедлении здесь http://api.jquery.com/animate/.

person Fresheyeball    schedule 13.09.2011

arrow_upward
0
arrow_downward

спасибо, ребята, за ваши ответы, я нашел проблему. это было то, что мне нужно добавить (плагин jQuery Background Position Animation), и все работает нормально, вы можете скачать его здесь

http://keith-wood.name/backgroundPos.html

и плагин Easing отсюда

http://gsgd.co.uk/sandbox/jquery/easing/

Окончательный код будет таким, наслаждайтесь :)

<script src='/jquery.easing.1.3.js' type='text/javascript'/>
<script src='jquery.backgroundpos.js' type='text/javascript'/>
<script type='text/javascript'> 
$(function(){
var easing = &#39;easeOutBounce&#39;;
$(&#39;.follow_fb_link, .follow_twitter_link, .follow_rss_link&#39;).css({backgroundPosition: &#39;0px 0px&#39;})
    .mouseover(function(){
        $(this).stop().animate({backgroundPosition:&#39;0 -22px&#39;},200, easing)
    })
    .mouseout(function(){
        $(this).stop().animate({backgroundPosition:&#39;0 0&#39;},200, easing)
    });
});
</script>
person Kariem Zaki    schedule 13.09.2011