jQuery Animate Несоответствия между браузерами - PullRequest
Новая
       10

jQuery Animate Несоответствия между браузерами

0 голосов
/ 13 апреля 2010

Я пытаюсь выяснить, почему это работает в FireFox, Chrome, но не в IE и не правильно в Safari и Opera (вы можете просмотреть его, работая на http://41six.com/about/)

HTML: 

<div id="menu"> 
    <ul> 
        <li> 
            <a href="/" class="home" title="Home" alt="fortyonesix">&nbsp;</a>   
            <div id='home-hover'>Home Page</div> 
        </li>
    </ul>
</div>

CSS: 

#menu .home {
    display:block;
    height:24px;
    width:24px;
    background-image: url('../images/Home.png');
}

#home-hover {
    position:fixed;
    padding: 3px 0 3px 10px;
    left:40px;
    top:125px;
    width: 100px;
    height: 20px;
    background-color:#000;
    color: #fff;
    z-index:9999;
    opacity: .9;
    filter: alpha(opacity=90);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-top-bottom-radius: 5px;
    display:none;
}

JQuery: 

$('.home').hover(function() {
    $('#home-hover').animate({width:'toggle'},200);
},
function() {
    $('#home-hover').animate({width:'toggle'},200);
});

Это определенно не красиво, но я не уверен, почему это не работает для Safari, Opera и IE

Ответы [ 2 ]

2 голосов
/ 18 апреля 2010

Во-первых, предложение: установите для «переполнения» значение «скрытый» - это избавит от небольшого артефакта анимации.

Интересно, эффект парения происходит в ie6 .... =)

Хорошо, я нашел кое-что, что поможет: попробуйте установить 

#menu {
   width:400px;
}

Да, это не красиво, но это покажет вам кое-что; наведите курсор мыши на «дом», и вы увидите, что «Домашняя страница» оживляет все приятное ... в самом низу вашего меню. Похоже, у вас есть две проблемы: переполнение и позиционирование.

Чтобы выделить проблему переполнения, установите 

#menu {
    width:60px;
}

и 

#home-hover {
    background-color:red;
}

(опять же, эти значения только для целей отладки).

Наведите указатель мыши на значок «домой», и вы увидите проблему.

Вы можете исправить это (я нашел методом проб и ошибок), удалив «position: fixed» из #menu и изменив «z-index» для всех ваших # home-hover и т. Д. На 1000.

Так что это хорошее начало для вас.

Честно говоря, возможно, стоит начать все сначала - похоже, что некоторые из этих css могли бы выиграть от серьезного рефакторинга.

Всего наилучшего,

Джаред

0 голосов
/ 13 апреля 2010

Когда вы наводите курсор мыши на левое меню, вы показываете DIV, который закрывает ссылку, поэтому вы больше не находитесь над ссылкой, вы находитесь над DIV, расположенным поверх него, поэтому анимация переходит к -Что-то сразу.

...