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 名称有冲突：

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除法有两个以上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 回答