-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 に答える