jQuery 애니메이션 드롭 다운이 갑자기 느리고 반응이 없습니다.

드롭 다운 메뉴에 아주 간단한 애니메이션이 있습니다.이 애니메이션은 아주 많이 지껄이고 꽤 자주 반응이 없어 보입니다. Firefox 및 Internet Explorer에서 발생합니다.jQuery 애니메이션 드롭 다운이 갑자기 느리고 반응이 없습니다.

JQuery와 코드를 사용 :

$(".optionslink").hover(function() { 
     $(".dropdown").stop(true,true); 

     $(".dropdown").animate({opacity: 100, top: '30px'},200); 
     $(".optionslink").css("background-color","#444"); 
    }, function() { 
     $(".dropdown").animate({top: -$(".dropdown").height(), opacity: 0}, 400); 
     $(".optionslink").css("background-color","transparent"); 
    } 
);

은 HTML은 :

<div class="optionslink" style="background-color: transparent;">         
    <a class="optionslinka" href="">Options <img alt="" src="/web/resources/graphics/lightdownarrow.gif"></a> 
    <div class="dropdown" style="opacity: 0; top: -86px;"> 
     Drop down text/links here       
    </div>       
</div>

사람은 몇 가지 조언을 제공 할 수 있습니까?

출처

2011-02-10 Chris

이미지를 제거하면 성능이 향상됩니까? 오래된 브라우저의 경우 "움직임이있는"이미지를 렌더링하면 병목 현상이 발생할 수 있습니다. CSS 배경 이미지로 시도해 볼 수있는 방법이 있습니까? "light down arrow"과 같은 이름이 있지만 아주 큰 이미지는 아닙니다.

편집 : 여기서 jsfiddle을 통해 실행 http://jsfiddle.net/J7QuV/ 난 그냥 IETester에서 IE7에서도 실행했고, 또한 매우 빠르다. IE7의 JS 구현은 FF보다 훨씬 느리다.

어떤 유형의 콘텐츠가 삭제됩니까? 그건 내가 시험에서 빠뜨린 부분 일거야.

출처

2011-02-10 16:54:34

좋은 아이디어. 그러나 이미지 자체는 애니메이션을 트리거하는 링크 내에 있으며 애니메이션 자체가 없으며 전혀 이동하거나 사라지지 않습니다. 주어진 상황에 따라 답변이 적용됩니까? – Chris

모든 브라우저에서 느린가요? 특히 그 중 하나가 있습니까? –

FF/IE ... Chrome은 괜찮아 보이지만 다시 Javascript 성능에서 리그가됩니다. – Chris

jQuery 애니메이션 드롭 다운이 갑자기 느리고 반응이 없습니다.

답변

관련 문제