0

假设我有 4 个 imagediv（imgdiv1、imgdiv2、imgdiv3、imgdiv4）和 4 个 contentdiv（condiv1 condiv2 condiv3、condiv4）和 1 个主要内容 div（maincon）所有 contentdiv（主要内容 div 除外）需要保持“隐藏”或不可见. 当我在 imagediv 上进行鼠标悬停时，每个 con 都会显示淡入淡出效果。所有 contentdiv 都在同一个地方，而 imagediv 是一种菜单。

示例：如果我将鼠标悬停在 imgdiv1 上，condiv1 将以平滑淡入效果出现。当我的鼠标离开 imgdiv1 时，condiv1 应该以淡出效果淡出到不可见状态，imgdiv2、imgdiv3 和 imgdiv4 也是如此。maincon div 将始终存在，并且当使用 imagediv 上的鼠标悬停触发时，condivs 应该刚刚越过 maincon。

如何使用 jQuery 实现这一点？什么是最好的方法？

4

3 回答 3

0

你看过悬停吗？它结合了鼠标输入/鼠标输出事件处理程序，最大限度地减少了您需要编写的代码。

于 2009-12-14T20:25:25.997 回答
0

您可以使用悬停功能
$('#imgdiv1').hover(function(){ /*fade in code*/},function(){/*fade out code*/});

或者，您可以查看 JqueryUI 并使用 Tabs 小部件。

于 2009-12-14T20:27:36.663 回答
0

您将使用 hover() 在两个功能之间切换，一个在 mouseenter 上，另一个在鼠标离开 imgdiv 上。为了实用起见，给你的 imgdiv 增加一个类：“imgdiv”。这允许您创建一次行为并将其附加到所有 imgdiv 元素，通过 each(); 环形。

此外，为所有 contentdiv 元素指定一个类“contentdiv”，这样您就可以通过一次调用来隐藏它们。

$(document).ready(function(){
   // hide all that should be hidden
   $('div.contentdiv').hide();
    var divToShow= '';
    var strlength = 10;
    $('div.imgdiv').each(function(){
            $(this).hover(function(){
                //find which contentdiv to show
                var thisId= $(this).attr('id');
                strlength = thisId.length;
                divToShow = 'condiv'+thisId.charAt(strlength-1);
                $(divtoShow).stop().fadeIn('slow');
                }
               ,
                function(){
                 // when mouse leaves imgdiv...
                 $(divtoShow).stop().fadeOut('slow');
               }
            );
      });

});
于 2009-12-14T20:30:21.400 回答