Question

我制作的脚本让我的页面更好，但它有可怕的动画脚本，我想知道如何让它更好最好是滑到一边，不透明度变为0

我对JS的了解不多，这花了我一周的时间才使它成功：S

HTML：

        <div id="menu-content">
        <a id="5home" class="show" href="#">Home</a>
        <a id="5contact" class="show" href="#">Contact</a>
        <a id="5about_us" class="show" href="#">About us</a>
        <a id="5a_team" class="show" href="#">A-Team</a>
        <a id="5connect" class="show" href="#">Connect</a>
        <a id="5donate" class="show" href="#">Donate</a>
    </div>

        <div class="cont" id="home" style="Display :visible ;">
        </div>

        <div class="cont" id="contact" style="Display :none ;">
                    </div>

        <div class="cont" id="about_us" style="Display :none ;">
        </div>  

        <div class="cont" id="a_team" style="Display :none ;">
        </div>

        <div class="cont" id="connect" style="Display :none ;">
        </div>  

        <div class="cont" id="donate" style="Display :none ;">
        </div>

JS：

$(document).ready(function(){
    $('.show').click(function menu() {
        var id = '#';
        id += this.id;
        id = id.replace(/5/, '');
        if ($(id).is(':visible')) {
        }
        else {
            var ido = '#';
            ido += $('.cont:visible').attr('id');
            $(ido).animate({
                opacity: 'toggle',
            }, 350);
            $(id).animate({
                opacity: 'toggle',
            }, 350);
        }
    });
});

Answer 1

在javascript中有一个名为JQuery的插件，它们具有很多功能。

函数fadeOut()允许隐藏一些HTML元素和fadeIn（）来显示。

Answer 2

要获得一个处理不透明度属性的甜蜜交叉渐变效果，只需使用animate方法jQuery with step and done。
在此Fiddle中，您将在容器中找到所有div在absloute位置div具有相对位置，使用索引jQuery方法所有ID都变得无用了你需要的所有jQuery代码是

<script type="text/javascript">
$(document).ready(function(){
    $('div.ok').css('opacity','1')
    $('.show').click(function() {
        var ind=$(this).index();
        $('#container').find('div:eq('+ind+')').animate({'opacity':'1'},{
              duration:1000,
              step:function(gox){
                  var op = gox
                  var op = gox < 1 ? (1 - gox) : 0;
                  $('#container').find('div.ok').css('opacity',op)
                 },
              complete:function(){
                  $('#container div').removeClass('ok')
                  $('#container').find('div:eq('+ind+')').addClass('ok')
              }
        });
    });
});
</script>

滑块上更流畅，更好的动画

2 个答案: