анимация ширины не работает должным образом в Chrome и Safari - PullRequest
Новая
       1

анимация ширины не работает должным образом в Chrome и Safari

0 голосов
/ 11 февраля 2012

У меня проблема с браузером 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>

Ответы [ 2 ]

1 голос
/ 11 февраля 2012

Обновление

Как указано в комментарии.Вы можете использовать эту версию http://jsfiddle.net/QqGk6/ для решения вашей проблемы

Менее хакерская, но более многословная.Похоже, это распространенная проблема 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 .. Возможно, немного хакерский, но вы можете проверить это с помощью 

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

Надеюсь, это поможет вам найти проблему.

0 голосов
/ 11 февраля 2012

Хорошо.Я на самом деле рефакторинг вашей разметки и CSS.Это, в таком случае, то, что вы хотите.Вы действительно нуждаетесь в фиксированной обертке?Попробуйте текучие макеты:)

Я разместил новые HTML, CSS и JS на скрипке -> http://jsfiddle.net/QqGk6/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...