javascript - 简单但棘手的显示/隐藏切换开/关组合让我疯狂

Question

有一些 div 需要显示/隐藏，并且其中的按钮需要知道它何时打开以及何时关闭。他们需要以某种方式“与他人交流”以了解何时隐藏或可见。哦，是的，我想在所有元素上保持平滑的淡入/淡出效果。

谢谢!!

我的 fiddle 在这里: http://jsfiddle.net/Pe9jn/

这是我得到的大部分有效的代码，但它有点古怪:

//hide maximize link on page load
$('.maximize_menu').css('display','none');


  //settings
  var opacity = 1, toOpacity = 0, duration = 350;
  //set opacity ASAP and events

$('.toggle_all, .toggle_all2').css('opacity',opacity).toggle(function() {
      $('#content, .maximize_menu, #menu, .minimize_menu').fadeTo(duration,toOpacity);
    }, function() {
      $('#content, .maximize_menu, #menu, .minimize_menu').fadeTo(duration,opacity);
    }                                         
  );

// this minimizes the menu and should make the mazimize_menu link visible when toggled off
$('.minimize_menu').css('opacity',opacity).toggle(function() {
      $('#menu, .minimize_menu,.maximize_menu').fadeTo(duration,toOpacity);
    }, function() {
      $('.maximize_menu, #menu, .minimize_menu, .maximize_menu').fadeTo(duration,opacity);
        $('.maximize_menu').show(duration,toOpacity);
        $('.maximize_menu').css('display','block');
    }                                                    
  );


// this maximizes the menu and should disappear once the menu is visible
$('.maximize_menu').css('opacity',opacity).toggle(function() {
      $('#menu, .minimize_menu,').fadeTo(duration,toOpacity);
    }, function() {
      $('#menu, .minimize_menu, .maximize_menu').fadeTo(duration,opacity);

    }                                                   
  );

Answer 1

我认为你应该重新考虑所有的逻辑，因为你实际上并没有隐藏元素，你只是将不透明度设置为 0。你真正应该使用的是 fadeOut()和 fadeIn()