Question

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

我知道我可以使用.animate({left: 0}, "slow");，但这并没有下降，但jquery还能提供什么呢？

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

将鼠标悬停在行业框上，您将看到＆＃34;查看项目＆＃34;向下移动我需要它以类似于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();
 }
);

Answer 2

css3过渡怎么样？它们很流畅，并且开始受到广泛支持 Here's an example根本不使用javascript。

更新：Another example不使用不透明度。

Answer 3

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

  },
  function () {
    $(this).children(".sectorImage").children(".showme").css("display", "none").css("margin-top","-25px");
  }
);

Answer 4

现在可行了

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

jquery动画的替代品？

4 个答案: