javascript - jQuery animate 在 IE 中的工作方式有所不同

Question

我有一个脚本，可以在屏幕右下角显示固定元素。该元素必须从下到上显示，就像在 Chrome 和 Firefox 中一样，但在 IE 中它是从上到下显示。

CSS:

.questionnaire {
  position: fixed;
  right: 25px;
  z-index: 150;
  display: none;
}

和JS:

(function($) {
    $(document).ready(function() {

        var cookie = $.cookie('smth');
        resizeContent();
        if (cookie == 'que') {
            $('.questionnaire').css('display', 'block').animate({ top: collapsed }, 2000);
            $('.questionnaire span').addClass('collapsed');
        } else {
            $.cookie('smth', 'que', { path: '/', expires: 1000*60*20 });
            $('.questionnaire').css('display', 'block').animate({ top: expanded }, 2000);
            $('.questionnaire span').removeClass('collapsed');
        }   
    });
    function resizeContent() {
        windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
        expanded = windowHeight - $('.questionnaire').height() + 'px';
        collapsed = windowHeight - $('.questionnaire').height() + 238 + 'px';
    }
})(jQuery);

预先感谢您的帮助!

Answer 1

实际上，您不需要在 jQuery 中制作动画。您可以将代码限制为添加删除类。 CSS 是更优化的方式，没有内联代码并且性能更好。

$("#col").click(function() {
  $('.questionnaire').removeClass('expanded');
});
$("#ex").click(function() {
  $('.questionnaire').addClass('expanded');
});

.questionnaire {
  position: fixed;
  background-color: red;
  right: 25px;
  bottom: 0px;
  height: 0px;
  z-index: -150; /* remove minus */
  display: block;
  width: 500px;
  transition: height 2s;
  -webkit-transition: height 2s;
}

.expanded {
  height: 230px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="col">Collapse</button>
<button type="button" id="ex">Expand</button>
<div class="questionnaire"></div>

由于该元素是固定的，因此无需将其显示设置为无。这在任何支持转换的浏览器上都是一样的。