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

发布于 2025-01-04 16:01:38 字数 1746 浏览 0 评论 0原文

我在使用此脚本时遇到 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>

原文

i have a problem with safari and chrome browser with this script. i can close sidebar in both browsers, but when i click to slide it open, sidebar opens transparent. everything works correctly and as it should in ff, opera and ie7+

any ideas?

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

懒猫 2025-01-11 16:01:38

更新

正如评论中提到的。您可以使用此版本 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

您也可以尝试“add/removeClass”方法。

似乎他们不想重新绘制您的 .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');
}

希望这会帮助您找到问题。

Update

As mentioned in the comment. You can use this version http://jsfiddle.net/QqGk6/ to solve your problem

Less hacky, but more verbose. Seems like this is a common WebKit Problem.

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

I found this article interesting: http://ajaxian.com/archives/forcing-a-ui-redraw-from-javascript

You could also try the "add/removeClass" method.

Seems like they dont want to repaint your .header .. Probably a bit hacky, but you can check this with

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');
}

Hope this will help you find the Problem.

回复收藏 0 原文