javascript - jquery 动画的替代品？

Question

悬停时我希望我的 div 向下滚动。

我知道我可以使用 .animate({left: 0}, "slow"); 但这不会下降，但是 jquery 还必须提供什么？

这是我的jsfiddle:http://jsfiddle.net/WZvPk/4/

将鼠标悬停在扇区框上，您将看到“查看项目”向下移动。我需要它以类似于 http://www.jeremymartin.name/examples/kwicks.php?example=3 的缓慢方式向下移动

然后需要不透明度，以便我的图像更暗。

编辑:向下滑动不起作用:

 $(".sectorGrid").hover(
  function () {
    $(this).children(".sectorImage").children(".showme").css("display", "block").css("margin-top", "-5px");
  },
  function () {
    $("div.sectorImage div.showme").css("display", "none");
  }
);

Answer 1

您可能需要 jQuery SlideDown，请参阅:http://api.jquery.com/slideDown/编辑:所以像这样:

$(".sectorGrid").hover(
 function () {
    $(this).children(".sectorImage")
    .children(".showme")
    .css("display", "block")
    .css("margin-top", "-5px")
    .slideDown("slow");
},
 function () {
   $("div.sectorImage div.showme").hide();
 }
);

您还可以添加一个带有 margin-top 和 display-block 属性的 css 类，例如:

.slideDown { display: block !important; margin-top: 5px !important; }

/* !important so they won't be overwritten..*/

然后你可以这样做:

$(".sectorGrid").hover(
 function () {
    $(this).children(".sectorImage")
    .children(".showme")
    .addClass("slideDown")
    .slideDown("slow");
},
 function () {
   $("div.sectorImage div.showme").hide();
 }
);