Question

我有一个看起来像Windows桌面的应用。有些图标可以打开显示内容的可拖动窗口（div）。

当我关闭窗口时，会发生这种情况：

$('#element'+boxId).animate({height: 0, opacity: 0}, 'fast');

当我打开一个窗口时，会发生这种情况

$('#element'+boxId).slideDown();

问题是，一旦窗口关闭，我就无法重新打开它。如果我想再次看到该窗口，我必须刷新页面然后打开它。

有没有办法做一个不能完全删除元素的炫酷淡出？

我也尝试过常规的slideUp()，但这也是一样的。

这很好用，只是看起来不太酷。

document.getElementById('element'+boxId).style.display = "none";

Answer 1

问题是你是通过影响高度和不透明度来隐藏它，而slideDown没有重置它们。这是一个选项：

http://jsfiddle.net/uggVb/

$('#hide').click(function (e) {
    e.preventDefault();
    var $div = $('#theDiv');
    $div.data('originalHeight', $div.css('height'));
    $('#theDiv').animate({
        height: 0,
        opacity: 0
    }, 'fast');
    //$('#theDiv').slideUp('fast');
});

$('#show').click(function (e) {
    e.preventDefault();
    $('#theDiv').animate({
        height: $('#theDiv').data('originalHeight'),
        opacity: 1
    }, 'fast');
    //$('#theDiv').slideDown('fast');
});

您可以使用slide函数代替animate函数。

Answer 2

如何仅使用jQuery添加和删除隐藏类并为要设置动画的属性使用CSS过渡？

<强> jQuery的：

$('#whatever').click(function(ev) {
  var $el = $('#element' + boxId);
  $el.toggleClass('hide');
});

<强> CSS：

#element {  /* or #element{{boxId}} or some class added to those elements */
  opacity: 1;
  overflow: hidden;
  width: 100px; height: 100px;

  transition: height 300ms, opacity 300ms;
}

#element.hide {
  opacity: 0;
  height: 0;
}

See demo

Answer 3

不确定它是否是您想要的，但您可以查看jQuery隐藏/显示功能

$('#element'+boxId).hide();

如果你想要更慢/更快的动画，你可以给出表示动画速度的隐藏参数（以毫秒为单位）

$('#element'+boxId).hide(1000);

Jquery，slideup（）但不删除元素

3 个答案:

See demo