Как мне сделать эту вкладку анимированной с помощью jquery? - PullRequest
Новая
       13

Как мне сделать эту вкладку анимированной с помощью jquery?

3 голосов
/ 22 ноября 2010

Мне бы хотелось, чтобы эта вкладка анимировалась при наведении на

До: before

При наведении: after

Как мне поступить с jquery? 

<div class="recruiterLink">
<a href="http://mydomain.com/recruiter/">
<span>Recruiting?</span>
<br>
Advertise a vacancy »
</a>
</div>

Спасибо!

Ответы [ 3 ]

5 голосов
/ 22 ноября 2010

это может быть начало того, что вы ищете: 

$(document).ready(function() {

    $('#tab-to-animate').hover(function() {

        // this anonymous function is invoked when
        // the mouseover event of the tab is fired

        // you will need to adjust the second px value to
        // fit the dimensions of your image
        $(this).css('backgroundPosition', 'center 0px');

    }, function() {

        // this anonymous function is invoked when
        // the mouseout event of the tab is fired

        // you will need to adjust the second px value to
        // fit the dimensions of your image
        $(this).css('backgroundPosition', 'center -20px');

    });

});

извините, неправильно прочитал вопрос, который должен делать этот код, чтобы переместить div в целом, предполагая, что он изначально был сдвинут вниз с использованием свойства position :lative css. 

$(document).ready(function() {

    $('.recruiterLink').hover(function() {

        $(this).css({
            'position' : 'relative',
            'top' : 0
        });

    }, function() {

        $(this).css({
            'position' : 'relative',
            'top' : 20
        });

    });

});
3 голосов
/ 22 ноября 2010

Я бы пошел следующим образом: 

$(".recruiterLink").hover(function(){
 $(this).stop().animate({"top" : "-20px"});
}, function(){
 $(this).stop().animate({"top": "0"});
});

Это означает, что ваш div.recruiterLink должен иметь позиционирование 

.recruiterLink
{
    position: relative;
}
1 голос
/ 22 ноября 2010

HTML 

<div class="recruiterLink">
<a href="http://mydomain.com/recruiter/">
<span>Recruiting?</span>
<div class="hover-item" style="display:none;">Advertise a vacancy »</div>
</a>
</div>

jQuery: 

$(".recruiterLink").hover(function() {
  $(this).find(".hover-item").toggle();
}, 
function() {
  $(this).find(".hover-item").toggle();
});

Вы также можете добавить некоторые эффекты анимации, если хотите.

...