Jquery .animate() ошибка в хроме

У меня есть веб-страницу, в которой одушевленный JQuery (в) функция, которая отлично работает в IE и FF, однако он работает ненормально в Chrome
вот мой кодJquery .animate() ошибка в хроме

<html> 
<head> 
<title>Untitled Document</title> 
<style type="text/css"> 

html{ 
    width:100%; 
    height:100%; 
} 

body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 

ul, ol, dl { 
    padding: 0; 
    margin: 0; 
} 

.clearFloat{ 
    clear:both; 
    height:0; 
    font-size: 1px; 
    line-height: 0px; 
} 
#navigation{ 
    width:100px; 
    height:100%; 
    position:fixed; 
    z-index:1; 
    left:0px; 
    position:relative; 
} 
#navigation .title-list{ 
    width:450px; 
    position:relative; 
    left:-350px; 
    height:100px; 
} 

#navigation .title{ 
    width:90px; 
    height:30px; 
    background-color:#f5f5f2; 
    position:absolute; 
    right:-90px; 
    top:35px; 
} 

#navigation .image{ 
    width:100px; 
    height:100px; 
    float:right; 
    background-color:#e5e5e4; 
} 
#navigation .image_hover{ 
    width:100px; 
    height:100px; 
    float:right; 
    background-color:#e5e5e4; 
    display:none; 
} 
#navigation .title-list:hover .image{ 
    display:none; 
} 
#navigation .title-list:hover .image_hover{ 
    display:block; 
} 


#navigation .sub-menu{ 
    width:350px; 
    height:30px; 
    float:right; 
    background-color:#f5f5f2; 
    margin-top:35px; 
    position:relative; 
} 
#navigation .title-list .drop-sub{ 
    display:none; 
} 

#navigation .title-list:hover .drop-sub{ 
    display:block; 
    position:absolute; 
    z-index:2; 
    width:225px; 
    right:20px; 
    background-color:#CC3; 
    padding-top:70px; 
} 

#navigation .sub-list{ 
    width:205px; 
    padding:10px; 
    height:30px; 
    background-color:#e5e5e4; 
} 

#navigation a{ 
    display:inline-block; 
    width:100%; 
    height:100%; 
} 

</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(e) { 
    $('#navigation .expand').hover(function(){ 
     $(this).stop().animate({'left':'0px'},'fast'); 
    }, function(e) { 
     $(this).stop().animate({'left':'-350px'},'fast'); 
    }); 

}); 
</script> 
</head> 

<body> 
<div id="navigation"> 
    <ul> 
     <li class="title-list expand"><div class="title">About</div><img src="images/navigation/about.png" class="image" /><img src="images/navigation/about_hover.png" class="image_hover" /> 
     <div class="sub-menu"> 
      <div class="drop-sub"> 
       <div class="sub-list"><a href="#">College</a></div> 
       <div class="sub-list"><a href="#">History</a></div> 
       <div class="sub-list"><a href="#">Principal's Message</a></div> 
       <div class="sub-list"><a href="#">Contact</a></div> 
       <div class="sub-list"><a href="#">Gallery</a></div> 
      </div> 
     </div> 
     </li> 
     <li class="title-list expand"><div class="title">Academics</div><img src="images/navigation/academics.png" class="image" /><img src="images/navigation/academics_hover.png" class="image_hover" /> 
     <div class="sub-menu"> 
      <div class="drop-sub"> 
       <div class="sub-list"><a href="#">Subjects</a></div> 
       <div class="sub-list"><a href="#">Structure</a></div> 
      </div> 
     </div> 
     </li> 


    </ul> 
</div> 

</body> 
</html>

, когда я запускаю этот код в FF или IE и наведите указатель мыши на элемент меню, элемент меню анимируется вправо, как ожидалось.

Когда я запускаю этот код в хроме и наведите указатель мыши на один из пунктов меню, меню сначала направляется влево немного, а затем направляется вправо в ожидаемое положение

У кого-нибудь есть решения?

EDIT: ------------------

Это происходит потому, что масштаб был установлен на 110% в хроме. Однако у кого есть решения, что можно сделать, чтобы этого избежать?

источник

2013-05-31 Abhishek Agarwal

В следующий раз создайте jsfiddle, пожалуйста, таким образом мы сможем помочь вам быстрее :) [здесь за вами] (http://jsfiddle.net/Gk45E/) –

Я не вижу меню, идущего влево в Google Chrome Version 27 .. –

Просто поместите это в скрипку, отлично работайте на моем хроме на данный момент ... может быть, кто-то еще может попробовать http://jsfiddle.net/dtcy7/ – Jaay

Это связано с тем, что позиционирование в Chrome установлено на авто, при загрузке страницы.

Если вы установили , оставите в своем jQuery, прежде всего, тем, что должно быть, когда страница загружается, вы должны быть в порядке.

источник

2014-05-19 11:15:27 pokero

Jquery .animate() ошибка в хроме

ответ

Смежные вопросы