JavaScript - 不透明度动画然后隐藏页面元素

时间:2013-12-23 20:36:04

标签: javascript jquery

这是我在网站上主导航的JavaScript。当用户点击链接时,通过将不透明度设置为0,隐藏了他们选择的链接之外的所有Id下的内容。但是我很快意识到链接仍然是可点击的。我可以对此JavaScript进行哪些编辑以保持不透明度动画,但在动画完成后会完全隐藏内容,以便包含的链接不可见?

JavaScript代码:

jQuery(document).ready(function() {

    /* How to Handle Hashtags */
    jQuery(window).hashchange(function(){
        var hash = location.hash;
        jQuery('a[href='+hash+']').trigger('click');
    });

    /* Main Navigation Clicks */
    jQuery('.main-nav ul li a').click(function() {
        var link = jQuery(this).attr('href').substr(1);

        if ( !jQuery('section.content.show, section#' + link).is(':animated') ) {
            jQuery('.main-nav ul li a').removeClass('active'); //remove active
            jQuery('section.content.show').addClass('show').animate({'opacity' : 0}, {queue: false, duration: 1000,
                complete: function() {
                    jQuery('a[href="#'+link+'"]').addClass('active'); // add active
                    jQuery('section#' + link).addClass('show').animate({'opacity' : 1}, {queue: false, duration: 1000});
                }
            });
        }
    });
});

0 个答案:

没有答案