Jquery动画双窗格Div
所以 我正在使用DavidWalsh详述的Jquery集成两个窗格div。我已经将他的代码迁移到了a,并做了一些调整,但动画似乎不起作用。如果有人知道我在代码中遗漏了什么,我将非常感谢您的输入 -马卡 jQuery:Jquery动画双窗格Div,jquery,html,jquery-animate,jsfiddle,panes,Jquery,Html,Jquery Animate,Jsfiddle,Panes,所以 我正在使用DavidWalsh详述的Jquery集成两个窗格div。我已经将他的代码迁移到了a,并做了一些调整,但动画似乎不起作用。如果有人知道我在代码中遗漏了什么,我将非常感谢您的输入 -马卡 jQuery: jQuery(document).ready(function() { jQuery(".itemJQuery").bind({ mouseenter: function() { var self = jQuery(this), billboard = se
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:
将jQuery(“.itemJQuery”)
更改为jQuery(.item”)
,它就可以工作了
代码:我不知道大卫·沃尔什的情况,但在这里,我们构建了这样的东西:)
<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>
.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;}
$('.item').on('mouseenter mouseleave',function(e){
$(this).stop().animate({scrollTop: e.type=='mouseenter'?200:0 }, 400);
});