鼠标单击时的jQuery动画div
情况下，我有3个块元素。按顺序：
->图像
->隐藏文本块(.hidden)
->页脚块(.blockimage)
在加载时，图像被覆盖在.hidden上(基本上是进一步的信息)，然后是标题的一小块。在鼠标单击.blockimage时，我希望.hidden在图像上方滑动。
注意:我已经将.hidden元素设置为position:absolute，它还有一个内联样式显示:none。如果我检查.hidden并取消选中display:none。它看起来很完美，但是我似乎不能在一次点击呼叫中将它动画化。
这就是我到目前为止所做的……
$('.blockimage').click(function() {
$('.blockimage .hidden').slideUp('fast', function() {
// remove display:none; of inline css on .hidden and slide content up. (Class already has a)
});
});不包括旋转，它将向上滑动，如下所示= http://css-tricks.com/examples/SlideupBoxes/
任何帮助都是非常好的:)
回答 2
Stack Overflow用户
发布于 2013-03-01 13:06:44
有一个包含图像和信息的div，使用overflow: hidden，然后在单击时设置位置动画。这是一个。
Html
<div class="container">
<img src="{yourimage}" />
<div class="info-block">
{information}
</div>
</div>CSS
下面是让它正常工作所必需的CSS。
.container {
position: relative;
overflow: hidden;
}
.info-block {
position: absolute;
bottom: -xx; // element height, or more
}Javascript
jQuery(document).ready(function(){
$('img').click(function(){
$(this).siblings('.info-block').animate({
bottom: '0'}, 'fast');
});
});更新:返回初始状态(只需jQuery或CSS3转换)
如果你想让它返回到初始状态，你可以通过让你的javascript检查bottom属性来扩展我给你的代码，如下所示：
if( $(this).siblings('.info-block').css('bottom') !== '0px' )
$(this).siblings('.info-block').animate({bottom: 0}, 'fast');
else
$(this).siblings('.info-block').animate({bottom: '-{some-other-height}'}, 'fast');您可以检查工作的。
然而，在这种情况下，我可能会使用CSS3 transition，只是为了有一个更干净、更轻量级的代码。当然，即使在你不想让它返回的情况下，你也可以使用transition，但在这种情况下，我发现了一个更快的jQuery。
解决方案2: CSS3过渡
如果您想使用CSS3转换，可以像这样定义另一个类：
.info-block.shown {
bottom: 0;
}然后在单击时使用jQuery切换类：
$('img').click(function(){
$(this).siblings('.info-block').toggleClass('shown');
});工作。
Stack Overflow用户
发布于 2013-03-01 12:53:50
尝试$('.hidden').slideUp，您当前的选择器正在尝试匹配具有两个类的所有元素。
此外，如果要对所选元素执行slideUp hides操作，请尝试使用show。
https://stackoverflow.com/questions/15158249
复制
腾讯云开发者
