1

私の開発者は、このページでスムーズで効率的なトランジションを作成するのに苦労しています。ロゴ「Clockrun」にカーソルを合わせて、テキストが完全に表示されると (特に Chrome で) どのように変化するか、また、ロール オーバーの影響がロゴから離れたり上に出たりするときにどのように風変わりであるかに注目してください。

これが使用されているjQueryです。トランジションがよりスムーズにフェードインおよびフェードアウトするように、これを行うより良い方法はありますか?

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>
4

2 に答える 2

2

停止を使用してみてください:

.stop(true, true) API: http://api.jquery.com/stop/

または、ここeffects http://docs.jquery.com/Effectsを見て、効果のあるショーを追加できますslow。

フリックしていただける場合は、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-15T08:14:34.910 に答える
0

段階的なフェードを実現する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-15T08:25:27.880 に答える