Question

我遇到使用此脚本的safari和chrome浏览器的问题。我可以在两个浏览器中关闭侧边栏，但是当我点击将其滑动打开时，侧边栏会打开透明。一切正常，因为它应该在ff，opera和ie7 +

任何想法？

<!doctype html>  
<html lang="et">
<head>  
  <meta charset="utf-8">  
  <title>Test</title>
  <script src="jquery-1.7.1.min.js"></script>
  <style>
    body, html {
      margin:0;
      background-color:#666;
    }

    .fixed {
      position:fixed;
      width:auto;
      height:100%;
    }

    .sidebar {
      float:left;
      width:300px;
      height:100%;
    }

    .header {
      float:left;
      width:300px;
      height:1200px;
      background-color:#d8d8d8;
    }

    .body {
      margin-left:600px;
      width:600px;
      background-color:red;
      height:2000px;
    }
  </style>
  <script>
    $(document).ready(function() {
      /*$('.sidebar').addClass('closed');
      $('.sidebar').hide();
      $('.body').css('margin-left', 300);*/

      $('.close').click(function(e) {
        e.preventDefault();

        if($('.sidebar').hasClass('closed')) {
          $('.sidebar').animate({ width : 'show'});
          $('.body').animate({ marginLeft : 600});
          $('.sidebar').removeClass('closed');
        } else {
          $('.sidebar').animate({ width : 'hide'});
          $('.body').animate({ marginLeft : 300});
          $('.sidebar').addClass('closed');
        }
      }); 
    });
  </script>
</head>
<body>
  <div class="fixed">
    <div class="sidebar">sidebar</div>
    <div class="header"><a href="#" class="close">sule</a></div>
  </div>
  <div class="body">body</div>
</body>
</html>

Answer 1

更新

如评论中所述。您可以使用此版本http://jsfiddle.net/QqGk6/来解决问题

不那么hacky，但更冗长。似乎这是一个常见的WebKit问题。

element = $('.header')[0];
var n = document.createTextNode(' ');
element.appendChild(n);
(function(){n.parentNode.removeChild(n)});

我发现这篇文章很有趣：http://ajaxian.com/archives/forcing-a-ui-redraw-from-javascript

您也可以尝试“添加/删除类”方法。

好像他们不想重新粉刷你的.header ..可能有点hacky，但你可以用

来检查

if($('.sidebar').hasClass('closed')) {
    $('.sidebar').animate({ width : 'show'});
    $('.header').append(" ");
    $('.body').animate({ marginLeft : 600});
    $('.sidebar').removeClass('closed');
} else {
    $('.sidebar').animate({ width : 'hide'});
    $('.body').animate({ marginLeft : 300});
    $('.sidebar').addClass('closed');
}

希望这可以帮助您找到问题。

Answer 2

确定。我实际上重构了你的标记和CSS。在这种情况下，这就是你想要的。你真的需要一个固定的包装器吗？尝试流体布局：）

我将新的html，css和js发布到了小提琴 - ＆gt; http://jsfiddle.net/QqGk6/

动画宽度在chrome和safari中无法正常工作

2 个答案:

更新