JQuery fade out

JQuery fade out

本文关键字：out fade JQuery      更新时间：2023-09-26

我有一个页面与几个(大约30)相同大小的divs。但class是不同的，如:

.mosaic-block, .events, .exhibitions, .gallery, .sponsors, .hospitality, .workshops, .lectures {
    background:rgba(0, 0, 0, .30);
    float:left;
    position:relative;
    overflow:hidden;
    width:6.36896%;
    height:22.2287%;
    margin:2px;
}

接下来，我有一个navi类，如:

<div id="navi">
    <a href="#"><div id="t0" class="n0 lfloat"><img src="images/home.png"><span>Home</span></div></a>
    <a href="#"><div id="t1" class="n1 lfloat"><img src="images/events.png"><span>Events</span></div></a>
    <a href="#"><div id="t2" class="n2 lfloat"><img src="images/workshops.png"><span>Workshops</span></div></a>
    <a href="#"><div id="t3" class="n3 lfloat"><img src="images/lectures.png"><span>Lectures</span></div></a>
    <a href="#"><div id="t4" class="n4 lfloat"><img src="images/exhibitions.png"><span>Exhibitions</span></div></a>
    <a href="#"><div id="t5" class="n5 lfloat"><img src="images/hospitality.png"><span>Hospitality</span></div></a>
    <a href="#"><div id="t6" class="n6 lfloat"><img src="images/gallery.png"><span>Gallery</span></div></a>
    <a href="#"><div id="t7" class="n7 lfloat"><img src="images/sponsors.png"><span>Sponsors</span></div></a>
</div>

我的目标是，如果用户点击Events[即div #t1]，所有的框将淡出，除了那些具有.events类。其他选项也一样。我使用Jquery。但是我的代码太长了。有什么办法把它缩短吗?

    <script type="text/javascript">
    $(function () {
    $('a #t0').click(function() {
        $("*").animate({ 
            opacity: 1.0
            }, 500 );
        });
    $('a #t1').click(function() {
        $("#t1").toggleClass("active");
        $(".exhibitions, .workshops, .sponsors, .hospitality, .lectures, .gallery").animate({ 
            opacity: 0.0
            }, 500 );
        $(".events").animate({ 
            opacity: 1.0
            }, 500 );
        });
</script>

同理，对于#t2、#t3、#t4等。有没有办法缩短代码?

编辑# 1

我的意思是，我是否必须为每个#t单独编写.click(function() 7次，并在编写$(".exhibitions, .workshops, .sponsors, .hospitality, .lectures, .gallery").animate()时排除该类?

另外，如何删除.active类时，用户单击其他选项?

试一试:Live Demo

你必须为所有的盒子指定一个共同的类，我使用boxes。

它还处理"Home"，这将显示所有div。设置所单击的div类为active。

<script type="text/javascript">
    $(function () {
        $('a #t0').click(function() {
            $(".boxes").animate({ 
                opacity: 1.0
                }, 500 );
        });

        $("#navi a").click(function() {
            c = $(this).text().toLowerCase();
            if(c != "home") {
                $('.' + c).animate({ 
                   opacity: 1.0
                 }, 500 );
                $('.boxes').not('.' + c).animate({ 
                   opacity: 0.0
                 }, 500 );
                $(".active").removeClass('active');
                d = $(this).find('div')[0];
                $(d).addClass('active');
            }
        });
    });
</script>

尝试使用jQuery fadeOut和fadeIn函数，并找到没有events类的元素，使用CSS非选择器not(.events)

首先，我将在主菜单上创建一些更好的标识符，以便更容易识别您想要加载的部分:

<a href="#" id="home">....</a>
<a href="#" id="events">....</a>
<!-- etc -->

从你的问题中，我实际上看不出内容划分是什么样的。所以让我们假设它们看起来像这样(我将使用content类来淡出非选中的内容):

<div class="home content">...</div>
<div class="events content">...</div>
<!-- etc -->

缩短你的JS，你可以使用fadeIn()和fadeOut()淡出，addClass()和removeClass()类管理，你只需要一个click事件监听器，因为你可以分配给所有的链接。

$('#navi a').click(function() {
    // only run if clicked anchor is not active
    if (! $(this).hasClass('active')) 
    {
        // active class management
        $('#navi a').removeClass('active'); // remove class from all anchors
        $(this).addClass('active');         // add class to selected anchor
        // fade out / fade in required content
        var showContentByClass = '.' + $(this).attr('id');
        $('.content').not(showContentByClass).fadeOut('slow');
        $(showContentByClass).fadeIn('slow');
    }
});

在上面的例子中，我还添加了一个检查，以确保所选择的选项不是当前显示的内容

相关文章：