javascript - 767下jquery改变动画效果

Question

如何在767屏幕宽度下改变动画效果？ 我有一个包含一些区域信息的 div，但它不适合 767。我用 css 将绝对 div 更改为相对。它效果很好，但淡入效果看起来很难看。我想将其更改为 SlideDown。

有什么好的解决办法吗？

谢谢大家的帮助!

这是我的代码:

$(window).resize(function() {
      if ($(window).width() < 767) {
        $('#regio-settings').click(function() {
            $('#regiobox').slideDown(300, "linear");
            return false;
        });
        $('#regiobox-close').click(function() {
            $('#regiobox').slideUp(300, "linear");
            return false;
        });


    } else {
         $('#regio-settings').click(function() {
            $('#regiobox').fadeIn(300, "linear");
            return false;
        });
        $('#regiobox-close').click(function() {
            $('#regiobox').fadeOut(300, "linear");
            return false;
        });
    }



    });

Answer 1

一些事情:

• 您不需要resize 处理程序
• 切勿在 resize 处理程序中绑定(bind)事件，因为它们会在您调整窗口大小时无用多次绑定(bind)事件
• 有一个函数可以根据屏幕尺寸返回一个标志
• 根据标志应用适当的动画。

下面是一个例子来证明上面的内容。

//Returns whether or not the screen is < 767
function isNarrowScreen() {
    return $(window).width() < 767;
}

$('#regio-settings').click(function(e) {
    e.preventDefault();
    //Assigns slideDown or fadeIn based on the screen width
    var anim = isNarrowScreen() && "slideDown" || "fadeIn";
    //Apply either slideDown or fadeIn
    $('#regiobox')[anim](300, "linear");
});

$('#regiobox-close').click(function(e) {
    e.preventDefault();
    //Assigns slideUp or fadeOut based on the screen width
    var anim = isNarrowScreen() && "slideUp" || "fadeOut";
    //Apply either slideUp or fadeOut
    $('#regiobox')[anim](300, "linear");
});

#regiobox {
    width: 200px;
    height: 100px;
    border: 1px solid;
    background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="regiobox"></div>

<button id="regio-settings">Open</button>
<button id="regiobox-close">Close</button>

希望对您有所帮助。