div 在页眉内/靠近页面顶部/在 2 次单击事件后不显示，而它的页脚孪生工作 - jQuery

Question

我做了2条，当你点击最小化/还原时，它们的行为应该是一样的。

虽然页脚栏100%正常工作，但第一次最小化+恢复后，标题中的恢复按钮没有显示。有趣的是，它仍然具有功能，但还原按钮是不可见的，而且主要在屏幕之外。我不知道为什么会这样。

http://jsfiddle.net/YMeRQ/

$('.minimize').click(function(){
    $(this).animate({'z-index':'-1', 'opacity':'0'}, {duration : 200});
    $(this).parent('.bar').animate({'height':'20px'}, {duration : 200});
    $(this).siblings('.restore').animate({'z-index':'10000', 'opacity':'1'}, {duration : 200});
});
$('.restore').click(function(){
    $(this).parent('.bar').animate({'height':'40px'}, {duration : 200});
    $('#restore-h') > $(this).animate({'z-index':'-1', 'bottom':'1px', 'opacity':'0'}, {duration : 200});
    $('#restore-f') > $(this).animate({'z-index':'-1', 'top':'1px', 'opacity':'0'}, {duration : 200});
    $(this).siblings('.minimize').animate({'z-index':'10000', 'opacity':'1'}, {duration : 200});
});

Answer 1

好吧，这似乎工作，当你不动画top和bottom。

所以你的代码是:

$('#restore-h') > $(this).animate({'z-index':'-1', 'bottom':'1px', 'opacity':'0'}, {duration : 200});
$('#restore-f') > $(this).animate({'z-index':'-1', 'top':'1px', 'opacity':'0'}, {duration : 200});

应:

$('#restore-h') > $(this).animate({'z-index':'-1', 'opacity':'0'}, {duration : 200});
$('#restore-f') > $(this).animate({'z-index':'-1', 'opacity':'0'}, {duration : 200});

Answer 2

它工作，只是在第二次点击后，你应用到'restore-h'的css样式'top: 1px;'。所以你的箭头是不可见的，因为它是向上推的。

还有，我不太确定你在这里用'>'字符想做什么:

$('#restore-h') > $(this)

在你的'。restore' click事件，您应该使用IF…ELSE语句，并检查THIS选择器是否具有要修改的ID。因为，我相信在它现在的形式中，你的代码对当前元素执行这两个语句:

$(this).animate({'z-index':'-1', 'bottom':'1px', 'opacity':'0'}, {duration : 200});
$(this).animate({'z-index':'-1', 'top':'1px', 'opacity':'0'}, {duration : 200});