Javascript jquery动画的替代方案？

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

我知道我可以使用

.animate（{left:0}，“slow”）但是这不会下降，但是jquery还可以提供什么呢

这是我的JSFIDLE：

将鼠标悬停在“扇区”框上，您将看到“视图项目”向下移动。我需要它以一种缓慢的方式向下移动，就像

然后需要不透明度，使我的图像更暗

编辑：向下滑动不适用于此：

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

您可能希望jQuery向下滑动，请参见：
编辑：
比如说：

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

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

您还可以添加一个css类，该类具有边距顶部和显示块属性，如：

.slideDown{display:block！重要；页边距顶端：5px！重要；}

然后你可以这样做：

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

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

您可能希望jQuery向下滑动，请参见：
编辑：
比如说：

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

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

您还可以添加一个css类，该类具有边距顶部和显示块属性，如：

.slideDown{display:block！重要；页边距顶端：5px！重要；}

然后你可以这样做：

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

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

css3转换呢？它们很顺利，并开始得到广泛支持。

它根本不使用javascript

更新：不使用不透明度。
css3转换如何？它们很顺利，并开始得到广泛支持。

它根本不使用javascript

更新：不使用不透明度。
​现在它起作用了

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

​

​
 ​现在它起作用了

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

​

​
 你的意思是类似于
slideDown（）
？我不确定我是否理解您想要什么，但如果您同时需要多个过渡，
.animate（）
是唯一的方法。我需要一个向下滑动的东西是的。。你有这个slideDown的例子吗？
jQuery（'div'）。slideDown（'slow'）
.animate
的工作原理是从对象的初始状态转换到参数中定义的最终状态。听起来好像您假设
{left:0}
是唯一的选项，但是您可以对任何具有数值属性的CSS属性设置动画。例如，可以通过设置高度动画来实现向下滑动。请你们提供一个答案。slideDown（）不适用于我的当前代码：请参见编辑。您的意思是类似于
slideDown（）
？我不确定我是否理解您想要什么，但如果您同时需要多个过渡，
.animate（）
是唯一的方法。我需要一个向下滑动的东西是的。。你有这个slideDown的例子吗？
jQuery（'div'）。slideDown（'slow'）
.animate
的工作原理是从对象的初始状态转换到参数中定义的最终状态。听起来好像您假设
{left:0}
是唯一的选项，但是您可以对任何具有数值属性的CSS属性设置动画。例如，可以通过设置高度动画来实现向下滑动。请你们提供一个答案。slideDown（）不适用于我的当前代码：请参见编辑。$（this）.子对象（“.sectorImage”）.子对象（“.showme”）.css（“显示”，“块”）.css（“页边空白顶部”，“-5px”）。slideDown（“慢速”）我还有其他jquery，它正在添加内联样式。这就是为什么我不能把它滑下来。谢谢，但是试试jsfiddle。似乎没有滑下也不奇怪，因为我只修复了扇区1；）。删除内联css“页边距顶部：-30px；”在.showme分区上，我想知道为什么showme分区在IE7中被定位在右边？？（this）.children（.sectorImage”）.children（.showme”）.css（“display”，“block”）.css（“margin top”，“-5px”）。slideDown（“slow”）我还有其他jquery，它正在添加内联样式。这就是为什么我不能把它滑下来。谢谢，但是试试jsfiddle。似乎没有滑下也不奇怪，因为我只修复了扇区1；）。删除内联css“页边距顶部：-30px；”在.showme div上我想知道为什么showme div在IE7中被定位在右边？？谢谢，但是当你第二次悬停时效果不起作用，这里有一个更新的JSFIDLE来在实际中显示它：谢谢，但是当你第二次悬停时效果不起作用，下面是一个更新的JSFIDLE来展示它的实际应用：对不起，我认为您使用css的解决方案不是跨浏览器的。如果是，那么第一个解决方案就是完美的。哇，谢谢你帮我跳出框框思考。这不是跨浏览器。但是，所有主要的（>75%）浏览器都支持它（chrome、firefox、safari、opera甚至IE10）。根据我的经验，如果一个新功能在旧浏览器上不起作用，它只会鼓励人们使用一个像样的浏览器。我100%同意你的观点。但客户可能会使用IE7，在IE11问世之前，这对我来说将是地狱（Sry，我不知道这是一个什么样的项目。在这种情况下，你可能应该依赖jquery。每当我有机会参与一个项目时，我都会尝试向客户解释新技术的优势，但他通常希望该网站同时在ie7和iPhone 3上运行。抱歉，我认为你使用css的解决方案不是跨浏览器的。如果是的，那么第一个解决方案就完美了。哇，谢谢你帮我跳出框框思考。它不是跨浏览器的。但是，所有主要的（>75%）浏览器都支持它（chrome、firefox、safari、opera甚至IE10）.根据我的经验，如果一个新功能在旧浏览器上不起作用，它只会鼓励人们使用一个像样的浏览器。我100%同意你的观点。但客户可能会使用IE7，在IE 11问世之前，这对我来说将是一场地狱（Sry，我不知道这是一个什么样的项目。在这种情况下，你可能应该依赖jquery。每当我有机会参与一个项目时，我都会尝试向客户解释新技术的优势，但他通常希望该网站同时在ie7和iPhone 3上运行。