-1

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

在此处输入图像描述

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

单击箭头字段后，箭头左侧显示的文本应向上滑动，变为粗体，并且一些其他内容应出现在现在可用的可用空间中。

4

2 回答 2

0

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

<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 );
});

对不起，我的英语不好 ：-/

于 2012-09-26T13:23:48.713 回答
0

您可以将 animate() 函数与单击事件一起使用：

$('#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'});
});

当然，您需要将点击处理程序添加到每个幻灯片容器，也许使用 each() 函数......

于 2012-09-25T07:53:34.747 回答