Question

我有三个div都被归类为同一个。当每个人都盘旋在一起时，我希望它们在空中滑动。目前，当其中一个被徘徊时，它们都会向上滑动。

到目前为止，我的代码是： HTML：

  <div class="second-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit eros odio, </p>

</div>

</div>

<div class="main-block">

  <div class="second-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit eros odio, et malesuada ex blandit porta. Praesent nec elit erat.</p>

  </div>

</div>

<div class="main-block">

  <div class="second-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit eros odio, </p>

</div>

</div>

CSS：

.main-block {width: 300px; height:500px; background:red; position:relative; overflow:hidden; float:left; margin-left:20px;}
.second-block{width:300px; height:auto; position:absolute; background:blue;}

jQuery的：

  var slideBlock = function(){
  var blockHeight = $(".second-block").height();
  $(".second-block").css({bottom: "-" + blockHeight + "px"}); 

  $(".main-block").mouseover(function(){
    $(".second-block").animate({bottom: "0px"});
  })
  $(".main-block").mouseout(function(){  
    $(".second-block").animate({bottom: "-" + blockHeight + "px"});
  })
 }
 slideBlock();

Answer 1

您应该使用$(this)来查找当前被鼠标悬停的元素。然后你想找到它下面的.second-block。例如：

$(".main-block").mouseover(function(){
    $(this).find(".second-block").animate({bottom: "0px"});
})

jQuery向上滑动动画

1 个答案: