Question

如何在767屏幕宽度下更改动画效果？我有一个包含一些区域信息的div，但它不适合767.我用css将绝对div更改为relative。它运作良好，但看起来很丑陋与fadein效果。我想把它改成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处理程序中的事件，因为当他们调整窗口大小时，无用绑定事件的次数太多
具有根据屏幕尺寸
根据该标志应用适当的动画。

以下是演示上述内容的示例。

＆＃13;

//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");
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

希望有所帮助。

Jquery在767下更改动画效果

1 个答案: