Question

我一直在尝试创建类似：http://jquerystyle.com/index.php的东西 - 当你翻过一个它设置一个翻转课程，而另一个淡出时，是否有人听说过这样做的资源？

Answer 1

这可能正是您想要的：

jQuery fading/dimming other list elements when one is hovered over, I'm 90% there..?

It includes an example.

（当然，我有点偏颇，但这正是你想做的事情）

Answer 2

这应该让你开始。

使用Javascript：

$(function() {
    $(".InnerBox").hover(function() {
        $(this).css('color', 'black').siblings(".InnerBox").css('color', 'gray')
    });
    $(".OuterBox").mouseout(function() {
        $(this).find(".InnerBox").css('color', 'black')
    });
});

HTML

   <div class="OuterBox">
   <div class="InnerBox">1</div>
   <div class="InnerBox">2</div>
   <div class="InnerBox">3</div>   
   </div>

Answer 3

你不需要插件或任何东西，因为它应该相当简单。

假设您使用无序列表来包含元素，并为其指定一个名为“nav”的ID。

您可以使用悬停事件将项目设置为“活动”，将其他项设置为“非活动”。

$(document.ready() {
    $('ul#nav li').hover(function() {
        $(this).closest('ul#nav').find('li').addClass('inactive');
        $(this).removeClass('inactive').addClass('active');
    },
    function() {
        $(this).closest('ul#nav').find('li').removeClass('inactive');    
        $(this).removeClass('active');
    }
});

您现在可以使用活动和非活动类来设置每个样式。您还可以通过添加到链中对每个项目执行淡入淡出/其他动画。

Answer 4

http://docs.jquery.com/Effects/fadeOut http://docs.jquery.com/Effects/fadeIn

虽然效果是'淡出'，但我想这样做的方法就是在背景为半像素透明，半像素黑色的div中消失。

试试这样的

$(".box").hover(function () {
    $(".box:not(:hover) > div").fadeIn("slow");
});

其中＆gt; div是具有深色背景的那个。未经测试，将其视为伪代码：）

Answer 5

这可能与他们在该页面上的表现类似：

$(function() {
    $('img.fader').bind('mouseover',function() {
        $(this).siblings('.fader').fadeOut('slow');
    }).bind('mouseout',function() {
        $('img.fader').fadeIn('slow');
    });
});

jQuery Style效果 - 淡出其他框

5 个答案: