Question

我有一个非常简单的div（1）。我需要其他简单的div（2）缓慢滑动（1）页面加载。从下到上。

<div id="slideshow" class="reb_darkblue_bg">
<img alt="Slideshow" src="images/slideshow_home_1.jpg"/>
</div>

<div class="slidingdiv" style="background:black; color:white;">Pricing</div>

在互联网上的例子太令人困惑了。我的英语不是最好的，是语言的理解。

Answer 1

我认为你要做的是动画“滑动效果”。查看jQuery库，还可以查看切换效果：http://docs.jquery.com/Effects/toggle

Answer 2

如果你想让inner-div从底部向上滑动，你需要将它绝对地放在父容器上，如下所示：

.container {position:relative; height:50px; width:640px; border:1px solid #333;}
.childSlider {position:absolute; bottom:0; left:0; width:640px; display:none;}

<div class="container">
  <div class="childSlider"><img src="file.jpg" /></div>
</div>

$(function(){
  $(".childSlider").slideDown();
  $(".container").click(function(){
    $(this).find(".childSlider").slideToggle();
  });
});

Answer 3

绝对定位 slidingdiv 并使用此代码：

<script type="text/javascript">
$(document).ready(function(){
    var p=$("#slideshow").offset();
    $("#slidingdiv").css(p);
    $("#slidingdiv").show('slide',{direction:'down'},5000);
});
</script>

在图像上滑动div

3 个答案: