jquery - 如何使用 fadetoggle 切换“mouseover - addClass”字段？

Question

请帮我！

• 我有两个执行导航功能的字段（field1、field2）
• 这些字段通过“AddClass”切换其他两个字段
• 我需要实际执行此操作“fadeToggle”

---

$(function () {
   $('#field1').mouseover(function() {
      $('#d1').addClass('over1');
   }).mouseover(function(){
      $('#d2').removeClass('over2');
   });
   $('#field2').mouseover(function() {
      $('#d2').addClass('over2');
   }).mouseover(function(){
      $('#d1').removeClass('over1');
   });
});

没有必要通过“悬停”来确保字段不会消失

Answer 1

也许是这样的？

$(function () {
      $('#field1').mouseover(function () {
          $('#d2').fadeOut(function () {
              $('#d1').fadeIn();
          });
      });
      $('#field2').mouseover(function () {
          $('#d1').fadeOut(function () {
              $('#d2').fadeIn();
          });
      });
});

见 JSFiddle：http: //jsfiddle.net/8P5vx/2/

编辑：我对你到底想要什么有点困惑。也许更像这样？

$(function () {
    $('#field1').mouseover(function () {
        $('#d1').fadeIn();
    }).mouseout(function () {
        $('#d1').fadeOut();
    });
    $('#field2').mouseover(function () {
        $('#d2').fadeIn();
    }).mouseout(function () {
        $('#d2').fadeOut();
    });
});

JSFiddle：http: //jsfiddle.net/8P5vx/3/

编辑 2：好的，这可能是您想要的（同时淡入/淡出，当鼠标未悬停时它们仍然可见）：

$(function () {
    $('#field1').mouseover(function () {
        $('#d2').fadeOut();
        $('#d1').fadeIn();
    });
    $('#field2').mouseover(function () {
        $('#d1').fadeOut();
        $('#d2').fadeIn();
    });
});

JSFiddle：http: //jsfiddle.net/8P5vx/4/