div content не анимируется

Question

Привет, я использую jquery для анимации окна слева, чтобы показывать слайд справа, чтобы показать ссылку на facebook, поле слайдов прекрасно, но текст внутри не влияет на функцию jquery, мой код является:

Jquery

$(document).ready(function() { 

    $("#social").mouseenter(function() { 

     $("#social").animate({ 
      width: 50 
     }); 

    }); 

    $("#social").mouseleave(function() { 

     $("#social").animate({ 
      width: 20 
     }); 

    }); 

}); 

HTML

<div id="social"><a href="xxxx.com">test</a></div> 

проблема заключается ти в A HREF, он не анимировать с DIV, я попытался дать A HREF идентификатор, еще не работало

Answer 1

Попробуйте с e.preventdefault()

$("#social").mouseenter(function() { 
     e.preventdefault(); 
     $("#social").animate({ 
      width: 50 
     }); 

    }); 

Answer 2

Вы должны убедиться, что ваш DIV имеет заданную ширину для того, чтобы оживить, например:

#social { 
    width: 20px; 
} 

Fiddle Demo

Answer 3

Не уверен, если это то, что вы хотите, но если вы хотите, чтобы <a> расширялся вместе с <div>, просто добавьте display: inline-block; и width: 100%; в вашем CSS:

#social a { 
    display: inline-block; 
    width: 100%; 
} 

Fiddle demo

Answer 4

Спасибо вам, ребята, я нашел решение, мне нужно изменить MarginLeft так, что она выглядит, как все это поле со связью было немного спрятано, а затем показывает

$(document).ready(function(){ 

    $("#social").mouseenter(function(){ 


$("#social").animate({width:80}); 
$("#social").animate({marginLeft:'0px'}); 



    }); 

     $("#social").mouseleave(function(){ 


$("#social").animate({width:40}); 
$("#social").animate({marginLeft:'-10px'}); 



     }); 

     });