jQuery的動畫

Question

我有一個摺疊/展開功能上一切正常（鉻/火狐/ IE /移動Safari瀏覽器），但沒有在OSX Safari瀏覽器8

工作

我已經縮小了它的範圍，因爲Safari並沒有在所有其他瀏覽器都能識別我的「maxheight」變量。如果我將變量更改爲數字，則工作正常。這些expand/collapse觸發器在具有不同最大高度的內容模塊上工作，所以我需要它作爲變量。

任何人都有使用Safari導致此問題的經驗嗎？

這裏是JS：

jQuery(document).on('click', '.expansion-trigger', function(e) { 
    var el = jQuery(this).parent().prev('.expansion-holder'); 
    var btn = jQuery(this); 
    var ex = '.expansion'; 
    var exp = '.expansion-trigger'; 
    var hide = btn.removeClass('show').addClass('hide'); 
    var hd = 'hide'; 
    var sh = 'show'; 
    var ele = jQuery(this).parent().prev().prev(); 
    var maxheight = ele.css('right'); 
    var gpa = btn.parent().parent(); 
    e.preventDefault(); 

    if (btn.hasClass('plus')) { 
     hide.parent().next(ex).find(exp).removeClass(hd).addClass(sh); 
     el.animate({ 
      'max-height': 3000 
     }, 1000); 
     gpa.find('.blur').slideToggle(); 
    } else if (jQuery('html').hasClass('touch')) { 
     hide.parent().prev(ex).find(exp).removeClass(hd).addClass(sh); 
     ele.removeAttr('style'); 
     var marg = ele.offset().top - 60; 
     jQuery('html, body').animate({ 
      scrollTop: marg 
     }, 1300); 
    } else { 
     hide.parent().prev(ex).find(exp).removeClass(hd).addClass(sh); 
     ele.animate({ 
      'max-height': maxheight 
     }, 800); 
     gpa.find('.blur').delay(400).slideToggle(); 
    } 

}); 

相關的HTML：

<section class="synopsis"> 
    <?php if($synopsis = get_field('show_synopsis')) { ?> 
     <h2 class="content__heading u-mb0">Synopsis</h2> 
     <div class="synopsis-holder expansion-holder"> 
      <?php echo $synopsis; ?> 
      <p class="blur"></p> 
     </div> 
     <p class="expansion"> 
      <a href="#" class="plus show expansion-trigger">Read more <i class="fa fa-plus"></i> 
      </a> 
     </p> 
     <p class="expansion"> 
      <a href="#" class="minus hide expansion-trigger">Read less <i class="fa fa-minus"></i> 
      </a> 
     </p> 
    <?php } ?> 
</section> 

這可能不是最好的解決辦法，但我用我的各種持有人right屬性重置max-height值的時候模塊倒塌。例如：

.synopsis-holder { 
    max-height: 17rem; 
    overflow: hidden; 
    right: 17rem; 
} 

Answer 1

我報廢使用right屬性的值和所使用的數據的屬性等data-height="17rem"在標記存儲和抓住值。