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中做动画。您可以将代码限制为fgets()。 CSS是更优化的方式，没有内联代码和更高的性能。

＆＃13;

add remove class

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

由于此元素已修复，因此无需将其显示为无。这在支持<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>的任何浏览器上都是一样的。

jQuery animate在IE中的工作方式不同

1 个答案: