0

情况，我有 3 个块元素。为了：

-> 图像

-> 隐藏文本块 (.hidden)

-> 页脚块（.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/

任何帮助都会很棒:)

4

2 回答 2

1

有一个包含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，只是为了有一个更简洁的代码。当然，即使在您不希望它返回的情况下，您也可以使用转换，但在这种情况下，我发现了一个更快的快速 jQuery。

解决方案 2：CSS3 过渡

如果要使用 CSS3 过渡，请定义另一个类，如下所示：

.info-block.shown {

    bottom: 0;

}

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

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

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

});

工作演示在这里。

于 2013-03-01T13:06:44.200 回答
0

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

此外，slideUp 隐藏选定的元素，尝试使用show。

于 2013-03-01T12:53:50.147 回答