Как улучшить эффект скольжения в заголовке моего сайта?

Question

Вот как я сделал эффект скольжения на этой странице: 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"); 
    });
  };
});

Я бы хотел улучшить его, потому что он не так грациозен, как я хочу,Я думаю, что было бы лучше, если бы одновременно возникал только один эффект скольжения без наложения.

С другой стороны, я пытался добиться того же эффекта следующим образом:

$(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}); }
);
};
});

Answer 1

$(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});
    });
});

Так что вы можете пропустить дополнительный цикл

Answer 2

Наконец, я улучшаю эффект с помощью этого трюка .

Однако я бы предпочел .animate вместо .slideDown/Up, чтобы я мог добавить свойства CSS. Во всяком случае, анимация плавная, и я доволен. Спасибо за ваши советы и улучшения!

Answer 3

Используйте метод jQuery " queue " для цепочки анимаций.