在jQuery ajax成功回调后，CSS可见性属性无法在Webkit浏览器上工作

Question

问题：
我通过单击某些光标图像来制作jQuery .ajax调用，以浏览图书目录，用ajax替换div的内容回复（纯html）。有一个光标图像，只有当书中有超过1张图片时才会显示，该图片由直接呈现ajax回调中给出的HTML的php代码控制。

在FF和IE> 7中，该脚本正常工作。但是在Webkit浏览器中，ajax回调很好，但是它不能正确呈现CSS。看起来右侧的光标图像会在第一次显示后被缓存，即使这本书可能没有任何额外的图像。有趣的是，正确的光标图像显示，但JS功能不工作（因为它应该是因为没有额外的图像），也因为当您使用在Chrome中打开的开发人员工具导航时，CSS渲染罚款，因为它应该是，就像在FF和IE7中一样。

这可能是错误使用$（document）.ready的问题？

这是插入外部.js文件的JS代码：

function goBook(val, dir, lang){ 
    var direction = ''; 
    var inverse = ''; 
    if(dir == 'down'){ 
     direction = '+'; 
     inverse = '-'; 
    }else{ 
     direction = '-'; 
     inverse = '+'; 
    } 
    $(document).ready(function(){ 
     $("div.itemlateral").animate({'top': inverse+"500px"}); 
     $.ajax({ 
      url: "projects", 
      type: "POST", 
      data: { book: val, pic: 0, language: lang }, 
      dataType: "json", 
      success: function(data){ 
       $("div.inner-content").html(data.projects); 
       $("div.itemlateral").css({'top': direction+"1000px"}); 
       $("div.itemlateral").animate({'top': "0px"}); 
       } 
      }); 
     }); 
    } 
} 

function nextImg(val, val2, dir, lang){ 
    var direction = ''; 
    var inverse = ''; 
    if(dir == 'right'){ 
     direction = '+'; 
     inverse = '-'; 
    }else{ 
     direction = '-'; 
     inverse = '+'; 
    } 
    $(document).ready(function(){ 
     $("div.node-image").animate({'left': inverse+"500px"}); 
     $.ajax({ 
      url: "projects", 
      type: "POST", 
      data: { book: val, pic: val2, language: lang }, 
      dataType: "json", 
      success: function(data){ 
         $("div.inner-content").html(data.projects); 
         $("div.node-image").css({'left': direction+"1000px"}); 
         $("div.node-image").animate({'left': "0px"}); 
         } 
      }); 
    }); 
} 

Answer 1

一些测试后，我会说，这是没有的JavaScript相关的，而实际晦涩重绘行为的错误WebKit中。

我之所以这么说，是因为一旦强制文档重新绘制（按Ctrl + a或调整窗口大小，或者如您在Dev模式中自动重绘文档那样），箭头就会消失。

我做了一些测试，并用您的.disabled [style.css]代替visibility: hidden;与display: none;类似乎解决了这个问题。