롤오버에 관한 기발한 jQuery

this page에서 개발자가 원활하고 효율적인 전환을 만드는 데 어려움을 겪고 있습니다. 'Clockrun'로고를 뒤집어서 (특히 Chrome에서는) 문자가 완전히 변경된 모습과 로고를 굴릴 때 롤오버가 얼마나 기묘한 지 알 수 있습니다.롤오버에 관한 기발한 jQuery

여기에 jQuery가 사용됩니다. 이것을 수행하는 더 좋은 방법이 있습니까? 그래서 트랜지션이 훨씬 더 부드럽게 페이드 인/아웃합니다. 여기에 effectshttp://docs.jquery.com/Effects 당신이 slow 효과 쇼를 추가 할 수 있습니다 http://api.jquery.com/stop/

또는 모양 :

.stop(true, true) API를 :

jQuery(document).ready(function(){ 

     jQuery(".super_featured_desc").css("opacity",0); 
     jQuery(".super_featured_logo").each(function(){ 
      jQuery(this).hover(
       function() { 
       jQuery(this).children(".super_featured_desc").css("display","block"); 
       jQuery(this).children(".super_featured_desc").animate({"opacity": 1}, 400); 
       }, 
       function() { 
       jQuery(this).children(".super_featured_desc").css("display","none"); 
       jQuery(this).children(".super_featured_desc").animate({"opacity": 0}, 400); 
       } 
     ) 
     }); 
    }); 
    </script>

출처

2012-11-15 Michael Rader

Chrome 또는 FF에서는 나에게 기이하지 않습니다. – jtheman

롤오프하면 계속해서 페이드 인 및 페이드 아웃됩니다. 또한 올바르게 페이드 아웃되지 않습니다. –

정지를 사용하여 보시기 바랍니다. 당신이 나를 jsfiddle 가볍게 할 수있는 경우

나는이 :)이

코드가

jQuery(document).ready(function(){ 

     jQuery(".super_featured_desc").css("opacity",0); 
     jQuery(".super_featured_logo").each(function(){ 
      jQuery(this).hover(
       function() { 
       jQuery(this).children(".super_featured_desc").css("display","block"); 
       jQuery(this).children(".super_featured_desc").stop(true, true) .animate({"opacity": 1}, 400); 
       }, 
       function() { 
       jQuery(this).children(".super_featured_desc").css("display","none"); 
       jQuery(this).children(".super_featured_desc").stop(true, true) .animate({"opacity": 0}, 400); 
       } 
     ) 
     }); 
    });

출처

2012-11-15 08:14:34

이것은 실제로 훨씬 잘 작동합니다. 그러나 점진적으로 사라지는 대신 롤 아웃 할 때 사라지는 것은 어떨까요? –

@TommyCoffee 도움이된다면':)'당신은'fadeOut'라는 이벤트를 찾아 적절히 연결해야합니다. ':)'try like this'.fadeOut ('slow'); ' –

이것이 어떻게 행해졌는지 모르겠습니다. 이것은 개발자의 코드입니다. 내가 어떻게 그럴 수 있니? –

로 마우스를 애니메이션에 콜백을 사용 mouseout에 점진적으로 페이드를 달성하기 위해 도움이되기를 바랍니다, 당신을 위해 그것을 만들 수 있습니다 여기에 jQuery(this).children(".super_featured_desc").css("display","none");을 삽입하십시오.

jQuery(document).ready(function(){ 

      jQuery(".super_featured_desc").css("opacity",0); 
      jQuery(".super_featured_logo").each(function(){ 
       jQuery(this).hover(
        function() { 
        jQuery(this).children(".super_featured_desc").css("display","block"); 
        jQuery(this).children(".super_featured_desc").stop(true, true) .animate({"opacity": 1}, 400); 
        }, 
        function() { 
        jQuery(this).children(".super_featured_desc").stop(true, true) .animate({"opacity": 0}, 400, function(){ 
    jQuery(this).css("display","none"); 
    }); 
        } 
      ) 
      }); 
     });

출처

2012-11-15 08:25:27 kayen

이 코드를 사용해 보았지만 매우 기이했습니다. –

롤오버에 관한 기발한 jQuery

답변

관련 문제