点击鼠标时,jQuery动画div

时间:2013-03-01 12:51:25

标签: jquery css

情况,我有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/

任何帮助都会很棒:)

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

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

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