0

アイコンクリックでフッターを拡張するこのコードを作成し、もう一度クリックすると12emの開始点に戻りますが、アイコンをもう一度クリックすると高さが12pxにアニメーション化されます。.animate を削除して .css を使用しても問題はありません

$('.mail').click(function() {
    if ($(this).hasClass('closed')) {
        var height = $(window).height() - $('header').outerHeight();
        $(this).removeClass('closed').addClass('open').children('i').attr('data-icon', 'h');
        //$(this).addClass('open').removeClass('closed').children('i').addClass('icon-remove-sign').removeClass('icon-envelope-alt');
        $('footer').animate({
            height: height
        },500);
        $('#contact').delay(400).fadeIn(300);
    } 
    else if($(this).hasClass('open')) {
        $(this).removeClass('open').addClass('closed').children('i').attr('data-icon', 'd');

        $('#contact').fadeOut(300);
        $('footer').animate({
            height: '12em',
        },500);

    }              

});

ありがとう

4

2 に答える 2

1

変数名に競合があります:

var height = $(window).height() - $('header').outerHeight();
      ^--- Change this to be hght for example

次に、次のように使用します。

$('footer').animate({
            height: hght
...
...

または、次のこともできます。

$('footer').animate({
            'height': height
于 2013-02-03T17:21:11.920 に答える
0

.mail分割に が 2 つ以上あると予想される場合を除き、class statesを使用する必要はありませんelse if。できますが、コードを簡素化するためにこれを行うことができます。

$(function() {
$('.mail').click(function() {
    if ($(this).hasClass('closed')) {
        var hght = $(window).height() - $('header').outerHeight();
        $(this).removeClass('closed').addClass('open').children('i').attr('data-icon', 'h');
        $('footer').animate({
            height: hght
        },500);
        $('#contact').delay(400).fadeIn(300);
        return;
        } 
   $(this).removeClass('open').addClass('closed').children('i').attr('data-icon', 'd');
   $('#contact').fadeOut(300);
   $('footer').animate({
        height: '12em',
     },500);
    });
});

またはelse代わりに使用

于 2013-02-03T17:31:28.383 に答える