Question

我正在寻找一个可以做类似事情的jQuery函数

enter image description here

我实际上知道如何实现幻灯片本身，但不知道可以打开屏幕截图中显示的框的功能。

箭头旁边显示的文字会在点击该箭头字段后向上滑动，变为粗体，其他一些内容应该在现有的可用空间中显示。

Answer 1

您可以将animate（）函数与click事件一起使用：

$('#arrow').click(function(){
     $('div.slidearea').animate({'height':'100px'}); // or how you want it
     $('#thing_to_hide').hide();
     $('thing_to_show').show();
     $('thing_to_get_fat').css({'font-weight':'700'});
});

当然，您需要将click处理程序添加到每个幻灯片容器中，可能使用each（）函数...

Answer 2

这就是我现在能够创造的：

<html>
<head>
    <title>jQuery Animate Test</title>
    <style>
    .animatebox { width: 960px; margin: auto; height: 50px; background: grey; position: absolute; bottom: 250;}
    .hiddenstuff { opacity: 0; } 
    </style>
    <script src="jquery-1.8.2.js"></script>

</head>
<body>

<h1>Animate Test</h1>
<button id="animateUP">AnimateUP()</button><button id="animateDOWN">AnimateDOWN()</button>
<div class="animatebox">
<p>Lala Box</p>
<p class="hiddenstuff">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmo</p>
</div>


<script>

$("#animateUP").click(function () {
    $('.animatebox').animate ({
        height: '400px'
    }, 200 );

});

$("#animateUP").click(function () {
    $('.hiddenstuff').animate ({
        opacity: '1'
    }, 200 );
});

$("#animateDOWN").click(function () {
    $('.animatebox').animate ({
        height: '50px'
    }, 200 );

});

$("#animateDOWN").click(function () {
    $('.hiddenstuff').animate ({
        opacity: '0'
    }, 200 );
});



</script>

</body>
</html>

这正是我所需要的，我为它感到有点自豪:) 我要做的下一件事是优化我的代码，因为我认为它不是实现这样的最佳方式：）

我需要做些什么来组合我的功能，例如：

$("#animateUP").click(function () {
    $('.animatebox').animate ({
        height: '400px'
    }, 200 );

});

$("#animateUP").click(function () {
    $('.hiddenstuff').animate ({
        opacity: '1'
    }, 200 );
});

抱歉我的英文不好： - /

幻灯片框与移动文本

2 个答案: