1

これがすでに回答されている場合は、これを投稿して申し訳ありません。しかし、私は検索しましたが、何をすべきか理解できませんでした。

プラス記号の画像が表示されたdivと、その下に情報が表示されたdivがあります。プラス記号をクリックすると、両方のdivがアニメーション化されますが、プラス記号をもう一度クリックしても何も起こりません。

私はそれがこのように機能することを望みます-プラス記号をクリックすると両方のdivがアニメーション化され、プラス記号をクリックするか、bigdivをそのままにしておくと元に戻ります。

これは私がこれまでに得たものです：

jQuery(document).ready(function(e){
    $('.plussign').click(function(event) {
        $('#bigdiv').animate({height : '400px'}, 200);
        $('.plussign').animate({bottom : '400px'}, 200);
    }).click(function(event) {
        $('#bigdiv').animate({height : '80px'}, 200);
        $('.plussign').animate({bottom : '80px'}, 200);
    });;
});
4

3 に答える 3

1 
jQuery(document).ready(function(e){
    $('.plussign').toggle(function(event) {
        $('#bigdiv').animate({height : '400px'}, 200);
        $('.plussign').animate({bottom : '400px'}, 200);
    }, function(event) {
        $('#bigdiv').animate({height : '80px'}, 200);
        $('.plussign').animate({bottom : '80px'}, 200);
    });
});
于 2012-10-25T13:41:26.790 に答える
0

トグルを使用する必要があります。以下のスクリプトを試してください

jQuery(document).ready(function(e){
    $('.plussign').toggle(
        function() {
            $('#bigdiv').animate({height : '400px'}, 200);
            $('.plussign').animate({bottom : '400px'}, 200);
        }, function() {
            $('#bigdiv').animate({height : '80px'}, 200);
            $('.plussign').animate({bottom : '80px'}, 200);
        }
    );
});
于 2012-10-25T13:43:42.473 に答える
0

これを試して：

//  BTW, if you're using newer jQuery and no other library that namespaces the $ symbol, 
//  you can replace that long document.ready line with the following:
//  $(function() {
jQuery(document).ready(function(e){
    //  call just one click function
    $('.plussign').click(function(e) {
        //  using toggle function will allow you to operate between the two clicks
        $(this).toggle(function(e) {    //  click odd
            //  If both elements are recieving the same action, then call them in the same line, 
            //  simply seperate with a comma
            $('#bigdiv, .plussign').stop().animate({height : '400px'}, 200);
            //  the .stop() function will stop any previous animation and continue with the new, 
            //  this is usefull for FAST CLICKING
        },
        function(e) {   //  click even
            $('#bigdiv, .plussign').stop().animate({height : '80px'}, 200);
        });
    });
})

でも

基本クラスとトグルクラスを使用し、jQueryの.toggleClass機能を使用することをお勧めします。これは、コーディングがはるかに少なく、cssを簡単に調整できるという点で制御が簡単だからです。例えば：

CSS

.open { 
    height: 400px;
}
.closed { 
    height: 80px;
}

脚本

$(function() {
    //  if you dont add the closed class to the html element itself on the HTML, 
    //  you can add it here before setting your click event
    $('#bigdiv, .plussign').addClass("closed");
    //  then set your click event with the toggleClass function
    $('.plussign').click(function(e) {
        $('#bigdiv, .plussign').toggleClass("open closed");
        // if you add jQueryUI to the mix you can control the speed in time as follows
        // $('#bigdiv, .plussign').toggleClass("open closed", 10000);
    });
})
于 2012-10-25T13:44:47.920 に答える