点击鼠标时，jQuery动画div

Question

情况，我有3个块元素。按顺序：

- ＆GT;图像

- ＆GT;隐藏文本块（.hidden）

- ＆GT;页脚块（.blockimage）

在加载时，图像覆盖.hidden（基本上是进一步的信息），然后是标题的小块。在鼠标点击.blockimage我希望.hidden在图像上方滑动。

注意：我已经将.hidden元素设置为position：absolute，它还有一个内联样式display：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/

任何帮助都会很棒：）

Answer 1

包含div包含图片和信息，overflow: hidden，然后点击动画位置。这是一个 demo 。

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 Transition）

如果您希望它返回初始状态，您可以通过使用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');

您可以查看有效的demo。

然而，在这种情况下，我可能会使用 CSS3过渡，只是为了拥有更清晰，更轻松的代码。当然，即使在你不希望它返回的情况下，你也可以使用转换，但在这种情况下，我发现了一个快速的jQuery。

解决方案2：CSS3过渡

如果您想使用CSS3 Transition，请定义另一个类，如下所示：

.info-block.shown {

    bottom: 0;

}

然后在点击时使用jQuery切换类：

$('img').click(function(){

      $(this).siblings('.info-block').toggleClass('shown');

});

工作demo here。

Answer 2

尝试$('.hidden').slideUp，您当前的选择器正在尝试匹配这两个类的所有元素。

此外，slideUp hides所选元素，请尝试使用show。