Question

function func(show = true) {
  var parent = $('#foo');
  var child = '<div id="bar"></div>';

  if (show)
    $(parent).fadeIn(350, function(){$(parent).html(child);});
  else
    $(parent).hide(0).delay(350, function() {
      $(parent.children()).remove()
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo"></div>

我怎样才能做得更好？，它无法正常工作，我不知道如何:(

谢谢！

Answer 1

这是一个例子。不需要jQuery来做演示，CSS可以为你做一切。根据你的问题没有理由做任何DOM操作（删除添加div），所以我没有提供它的例子。

$(document).ready(function(){
  $('input').on('click', function(){
    var isChecked = $(this).prop("checked");
    $('#foot').toggleClass("hidden", !isChecked);
    $('#bar').toggleClass("is-fading", isChecked);
  });
});

.hidden {
  adisplay: none;
}
.fade-in{
opacity: 0;
}
.fade-in.is-fading{
transition: opacity 2.0s ease-in;
opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="test">Booya
<div id="foo" class="hiddne">
<div id="bar" class="fade-in">Hello</div>
</div>

Answer 2

不知道您的用例，但我认为，您正在寻找代码的一些改进。

function func(show = true) {
  var parent = $('#foo');
  var child = '<div class="bar">Hi Bar</div>';
  if (show)
    parent.fadeIn(350, function() {
      parent.html(child)
    });
  else
    parent.fadeOut(350);
}

我不能用jQuery删除/设置孩子

2 个答案: