0

これが私がこのページでスライド効果を作った方法です：dmg-01.net：

$(document).ready(function(){
  $(".trail-text").attr("style", "display:none;");
  if ($("#one,#two,#three,#four,#five")) {
    var pixies = $("#one,#two,#three,#four,#five");
    $("#one,#two,#three,#four,#five").hover( function() { 
      $(this).find(".trail-text").slideDown("fast"); 
    }, function() { 
      $(this).find(".trail-text").slideUp("fast"); 
    });
  };
});

思ったほど優雅ではないので、改善したいと思います。スライド効果が1つだけで、重ならないようにするといいと思います。

一方、私はこの方法で同じ効果を達成しようとしました：

$(function(){
  $("#one,#two,#three,#four,#five").each(function(){
    $(this).hover(function(){
      $(this).animate({height: "100%", width: "100%"}, {queue:false, duration:111});
    },function() {
      $(this).animate({height: "44px", width: "44px"}, {queue:false, duration:333});
    });
  });
});

高さの「自動」を設定する方法がわからず、「非表示」要素内のコンテンツが要素の外部に表示されるため、破棄しました。

これをどのように改善できますか？

私の目的によれば、CSSプロパティを使用して要素の子孫をアニメーション化することを好みます。これは私がそれをやろうとした方法ですが、それは機能していません。なんで？

$(document).ready(function(){
$(".trail-text").attr("style", "display:none;");
if ($(".#one,#two,#three,#four,#five")) {
$("#one,#two,#three,#four,#five").hover(
function() { $(this).find(".trail-text").animate({height: "100%", width: "444px"}, {queue:false, duration:111}); },
function() { $(this).find(".trail-text").animate({height: "0", width: "444px"}, {queue:false, duration:333}); }
);
};
});
4

3 に答える 3

0

jQueryの「queue」メソッドを使用してアニメーションをチェーンします。

于 2011-07-28T19:41:56.390 に答える
0 
$(function(){
    $("#one,#two,#three,#four,#five").hover(function(){
      $(this).stop().animate({height: "100%", width: "100%"}, {queue:false, duration:111});
    },function() {
      $(this).stop().animate({height: "44px", width: "44px"}, {queue:false, duration:333});
    });
});

したがって、追加のループをスキップできます

于 2011-07-28T20:07:58.657 に答える
0

最後に、このトリックで効果を改善します。

ただし、CSSプロパティを追加できるようにする.animate代わりに、代わりに使用したほうがよいでしょう。.slideDown/Upとにかく、アニメーションはスムーズで満足しています。アドバイスと改善をありがとう！

于 2011-08-08T10:41:31.057 に答える