Jquery 动画 2 窗格 Div答案

【问题标题】：Jquery Animated 2-Pane DivJquery 动画 2 窗格 Div
【发布时间】：2012-09-09 19:27:36
【问题描述】：

所以，

我正在使用 David Walsh here 详细介绍的 Jquery 集成两个窗格 DIV。我已将他的代码迁移到JSfiddle 并进行了一些调整，但动画似乎不起作用。如果有人知道我在代码中缺少什么，我将不胜感激！

-马卡

jQuery:

jQuery(document).ready(function() {
  jQuery(".itemJQuery").bind({
    mouseenter: function() {
      var self = jQuery(this), billboard = self.data("billboardElement");
      if(!billboard) {
        billboard = jQuery(jQuery(".item-billboard", this)[0]);
        self.data("billboardElement", billboard);
      }
      jQuery(billboard).stop().animate({
        "margin-top": "-200px"
      });
    },
    mouseleave: function() {
      jQuery(this).data("billboardElement").stop().animate({
        "margin-top": 0
      });
    }
  });
});

HTML：

<div class="item">
    <div class="item-billboard">
      <h3>Angry Birds</h3>
    </div>
    <div class="item-detail">
      <p>There's more detail about the item inside this DIV!</p>
    </div>
</div>

CSS：

.item {position: relative;width: 240px;overflow: hidden;border: 1px solid #ccc;}
.item {height: 200px;}      
.item a {text-decoration: none;color: #000;}     
.item-billboard, .item-detail {padding: 10px;height: 180px;}     
.item-billboard {margin-top: 0;background: red;}
.item-billboard h3 {font-size: 13px;font-weight: bold;color: #262626;font-family: "Open Sans", arial, sans-serif;}
.item-detail {background: #ececec;}

【问题讨论】：

标签： jquery html jquery-animate jsfiddle panes

【解决方案1】：

将 jQuery(".itemJQuery") 更改为 jQuery(".item") 即可。

代码：http://jsfiddle.net/3BMfu/12/

【讨论】：

【解决方案2】：

我不了解 David Walsh，但在 SO，我们构建这样的东西 :)

jsBin demo

$('.item').on('mouseenter mouseleave',function(e){
    $(this).stop().animate({scrollTop: e.type=='mouseenter'?200:0 }, 400);    
});

【讨论】：