0

你如何让一个物体像隐藏在某物后面一样向上滑动，而不是弯曲出来。

例子

在 jsfiddle 演示中，您可以看到圆在滑动时变平，但我希望它像隐藏在某物后面一样滑出。（不幸的是，我不能只将具有相同背景颜色的图像或 div 放在圆圈上，然后让下方的圆圈向上滑动。）

html

<div class="button">Hover</div>
<div class="box">
    Sliding down!
</div>

jQuery

$('.box').hide();
$('.button').hover(
    function() {
        $('.box').slideToggle('slow');
    }
);

更新： 你们有很好的答案！但我找到了一个解决方案：http: //jsfiddle.net/7fNbM/36/ 我决定使用 animate() 效果，只需将 .button div 和 .box div 包装在一个容器中，并给容器一个特定的隐藏的高度、特定宽度和溢出。这样我就不必在背景中覆盖图像，它提供了我正在寻找的效果。

再次更新： 我刚刚发现您可以使用称为blind 的jquery ui 效果轻松获得此效果。

4

4 回答 4

2

它弯曲的原因是因为您正在使用 slideToggle 来改变对象的高度以使其向上滑动。你想做的是做一个物体，比如说你的圆圈。而不是使用slideToggle 为高度设置动画，而是要为位置设置动画以将其隐藏在屏幕之外或另一个对象后面。

扩展的东西：

$('.button').hover(
        function() {
            $('.box').stop().animate({top:40}, 800);
        }, function(){
            $('.box').stop().animate({top:-180}, 800);
        }
    );

小提琴链接：http: //jsfiddle.net/7fNbM/17/

于 2013-06-27T01:39:52.573 回答
0

这里：http: //jsfiddle.net/7fNbM/20/

   $('.button').mouseenter(
        function() {
            $('.box').stop();
            $('.box').animate({top: 50, left:0}, 400);
    }
    ).mouseleave(
        function() {
            $('.box').stop();
            $('.box').animate({top: -180, left:0}, 400);
    }
    );
于 2013-06-27T01:54:30.707 回答
0

你需要像这样为盒子添加一个包装器

<div class="button">Hover</div>
<div class="container">
  <div class="box">
    Sliding down!
  </div>
</div>

和 javascript

$('.container').hide();
    $('.button').hover(
        function() {
            $('.container').slideToggle('slow');
        }
    );
于 2013-06-27T01:32:12.723 回答
0

如果您想将按钮放在图像顶部，那么这个呢？

在这里查看，演示http://jsfiddle.net/yeyene/MW5Gq/1/

$('.button').hover(
    function() {            
        $('.box').stop().animate({'top':'50','opacity':'1'}, 800);
    }, function(){
        $('.box').stop().animate({'top':'-125','opacity':'0'}, 800);           
    }     
);
于 2013-06-27T03:18:19.187 回答