Bu sekmeyi jquery ile nasıl canlandırabilirim?

Question

Ben önce

üzerinde süpürdü zaman bu sekme animate istiyorum:

nasıl Jquery ile bu konuda gidiyorsun: vurgulu üzerinde

?

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

Teşekkürler!

Answer 1

: - Eğer taşıyabilirsiniz ikinci kod için relative` tekrarlayan geçerli:

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

Bu div.recruiterLink `pozisyonu konumlandırma

.recruiterLink 
{ 
    position: relative; 
} 

Answer 2

bu aradığınız şeyin bir marş olabilir:

$(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'); 

    }); 

}); 

üzgünüm bu kod başlangıçta konumunu kullanarak aşağı itti olduğunu varsayarak bir bütün olarak div taşımak yapmalıyım sorusunu yanlış okumuş: bağıl css özelliği.

$(document).ready(function() { 

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

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

    }, function() { 

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

    }); 

}); 

Answer 3

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: İsterseniz

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

Ayrıca, bazı animasyon efektleri ekleyebilirsiniz.

Bu yol gider