0

我已经建立了一个切换，它将向下滑动一个 div 以显示内容。我没有使用正常toggle()功能，jQuery因为我想显示前 300 像素的内容，然后滑动以显示其余内容。

无论如何，我有一个脚本设置来动画容器 div 的高度，它显示了里面的内容。

function slideCut() {

    var revertHeight = 300;
    var finalHeight = 0;
    var s = 1000;

    $('.cutBottom a').click(function() {

        event.stopPropagation();
        var p = $(this).parent().parent();
        var h = p.css('height', 'auto').height();
        var cut = $(this).parent().find('.cutRepeat');

        // Fix height
        if (finalHeight == 0) {
            p.css('height', 'auto');
            finalHeight = p.height();
            p.height(revertHeight);
        }

        if ($(this).hasClass('toggled')) {
            $(this).removeClass('toggled');
            p.animate({height:revertHeight}, {
                duration: s
            });
            cut.fadeIn('fast');
        } else {
            $(this).addClass('toggled');
            p.animate({height:finalHeight}, {
                duration: s,
                complete: function() {
                    cut.fadeOut('fast');
                }
            });
        }
        return false;
    });

}//end

问题是，第二次将高度设置为完整大小（滑动 div 以显示内容）时它没有设置动画，它只是跳转到完整高度。为什么会这样？

工作示例：http: //jsfiddle.net/6xp2Y/3/

4

2 回答 2

1

在所有的辛勤工作和小提琴被打破之后，我们所要做的就是从您的代码中删除一行：

function slideCut() {

    var revertHeight = 300;
    var finalHeight = 0;
    var s = 1000;

    $('.cutBottom a').click(function() {

        event.stopPropagation();
        var p = $(this).parent().parent();
        //var h = p.css('height', 'auto').height(); //REMOVE THIS LINE
        var cut = $(this).parent().find('.cutRepeat');

        // Fix height
        if (finalHeight == 0) {
            p.css('height', 'auto');
            finalHeight = p.height();
            p.height(revertHeight);
        }

        if ($(this).hasClass('toggled')) {
            $(this).removeClass('toggled');
            p.animate({height:revertHeight}, {
                duration: s
            });
            cut.fadeIn('fast');
        } else {
            $(this).addClass('toggled');
            p.animate({height:finalHeight}, {
                duration: s,
                complete: function() {
                    cut.fadeOut('fast');
                }
            });
        }
        return false;
    });

}//end

slideCut();

更新了你的小提琴：http: //jsfiddle.net/brandonscript/6xp2Y/5/

于 2013-10-25T19:08:26.357 回答
0

更新答案！

问题出在这里

if (finalHeight == 0) {
  parent.css('height', 'auto');
  finalHeight = parent.height();
  parent.height(revertHeight);
  console.log('finalHeight:'+finalHeight);
}

这只是在开始时运行，因为在第一次运行后finalHeight不再0运行。

您可以通过在再次关闭后重新设置来解决此问题，就像finalHeight这样0

if ($(this).hasClass('toggled')) {
  $(this).removeClass('toggled');
  parent.animate({height:revertHeight}, {
    duration: speed
  });
  cut.fadeIn('fast');
  finalHeight = 0;
} else { [...]
于 2013-10-25T19:06:35.723 回答