有效的jquery代码不起作用-父/子问题

Question

http://jsfiddle.net/mjmitche/gq6En/78/

在此小提琴中，如果您将橙色框拖动到白色框中，则石灰和黑色框将淡出。但是，即使(根据JSLint)代码指示它淡入，莱姆框也不会淡入。

1)石灰盒没有淡入，因为它是黑盒的子代，而父黑盒已经消失了吗？

2)有没有办法在不使父黑盒可见的情况下使子石灰盒重新出现？

Answer 1

1. 是的，#black有继承到所有后代的display: none; -其中，如果您将其重新附加到#black元素之外，就会生成#lime.
2. Yes，。当它是不可见元素的后代时，它永远不会是可见的。

Demo取代…

$("#lime").fadeIn(1000);

…使用…

$("#lime").insertAfter("#black").fadeIn(1000); // Reattach after `#black`. This will manipulate the DOM!

…为了证明第一点和第二点:)

Answer 2

1.)是-您可以通过将#black div添加到第二个选择器来测试它：

drop: function (event, ui) {
            $(this)
                .addClass ("ui-state-highlight")
                .find ("p")
                .html("dropped");
            $("#lime, #black").fadeOut(1000, function(){ // Only #black needed here
            $("#lime, #black").fadeIn(1000); // Only #black needed here as well
            });

这就把#lime带回来了(不幸的是，还有黑色的)。

2.)我不确定如何解决这个问题，因为您试图将其放在适当的位置，但是您可能需要将#black属性更改为nothing (通过将类设置为透明或其他方式来更改隐藏的类)，然后将其淡入，使其看起来消失了？

Answer 3

我不认为你可以做到这一点，如果不将#黑色淡入其中。但是，在淡入和淡出#粉色之前，您可以将#black的背景更改为none。我已经编辑了你的小提琴/

这就是你要找的吗；http://jsfiddle.net/gq6En/93/