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/

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

1 个答案: