Question

我有三个div，当我们点击任何div时，我试图显示/隐藏div2。到目前为止，我已经成功了，但现在我想在show.hide div中实现一些动画。

我尝试了很多并阅读了很多解决方案，但由于我是jQuery的新手，我无法做到。这是我在动画之前尝试过的代码

$(".more , .expander,.headingopen").click(function() {
var expanderDiv = $(this).parents(".content_item").find(".textContent");

if ($(expanderDiv).length > 0 && $(expanderDiv).hasClass("expander") ) {
    $(expanderDiv).removeClass("expander");
    var MoreDiv = $(this).parents(".content_item").find(".more");
    $(MoreDiv).html("Mindre");
}
else {
    console.log("addclass");
     $(expanderDiv).addClass("expander new");
    var MoreDiv = $(this).parents(".content_item").find(".more");
    $(MoreDiv).html("More");
}
});

jQuery(document).ready(function() {
   jQuery(".more , .expander,.headingopen").click(function() {
            jQuery('.expander').slideToggle("slow");

    });
});

动画或幻灯片后

http://jsfiddle.net/9Lw6T/123/

有没有办法动画div并在某些高度停止滑动，就像动画我在第一次尝试时没有动画一样。 Slidedown需要自动隐藏并使用此代码。

谢谢

Answer 1

使用jQuery动画进入自动时出现问题，所以你必须做一些工作（参见：JavaScript jQuery Animate to Auto Height）

// get the current height
var curHeight = $textArea.height(); 
// set set the css to auto height and get how tall it is
var autoHeight = $textArea.css('height', 'auto').height(); 
// set the css back to the original height, then animate to the new height
$textArea.height(curHeight).animate({height: autoHeight}, 1000);

这一切都在一起 http://jsfiddle.net/9Lw6T/127/

使用slidetoggle（）时隐藏特定高度的div

1 个答案: