Question

我正在尝试使用jquery来显示我的div容器与我的按钮的坐标。当首次加载页面时，所有div容器都将被隐藏。使用时单击按钮，将显示不同的容器。我的问题是div只会在点击Chrome中的按钮时显示，但不会显示firefox或IE。如果有人能帮我解决这个问题我很感激。感谢。

HTML

<div>
<ul id="menu">
    <li id="project"><a href="#"></a></li>
    <li id="code"><a href="#"></a></li> 
    <li id="skill"><a href="#"></a></li>
    <li id="about"><a href="#"></a></li>
    <li id="contact"><a href="#"></a></li>
</ul>
</div>

<div id='projects'> 
   contents 
</div>
<div id='skillContainer'> 
   contents 
</div>
<div id='codeContainer'> 
   contents 
</div>
.......

我的Jquery ......

function breakline(position) {
   $('#breakline').animate({
   top:position},'slow');
   console.log(position);
   };

function hideAll() {
  $('#projects').hide(); 
  $('#codeContainer').hide();
  $('#skillContainer').hide();
  $('#aboutContainer').hide();
  $('#contactContainer').hide();
  $('#bonusSkill').hide();
  $('#mePic').hide();
  $('#phoneNumber').hide();

};

hideAll(); 

$('#project a').click(function(){
  hideAll();
  breakline(256);

  $('#projects').animate(  //won't show in firefox or IE
    {opacity:'toggle', height:'toggle'},'slow');


});



$('#code a').click(function(){
  hideAll();
  breakline(200);

  $('#codeContainer').animate( //won't show in firefox or IE
    {opacity:'toggle', height:'toggle'},'slow');

});




$('#skill a').click(function(){

  hideAll();
  breakline(236);

  $('#bonusSkill').animate(  //won't show in firefox or IE
    {opacity:'toggle', height:'toggle'},'slow');

  $('#skillContainer').animate(
    {opacity:'toggle', height:'toggle'},'slow');


});

Answer 1

从我可以看到你使用的是在IE和Firefox中没有运行的console.log（没有Firebug）。删除该行应该可以解决您的问题。

动画在firefox和IE中不起作用

1 个答案: