Возвратить значения CSS свойств $(object).css(“margin”)

333

08 января 2017, 19:10

Необходимо возвратить некоторые из CSS свойств элемента HTML-страницы в понятном виде для Edge, IE. Конкретно: необходимо вернуть значения отступов и полей элемента и применить их для анимации других элементов.
this !== object

$(this).animate({
    width: "toggle",
    margin: $(object).css("margin"),
    padding: ($(object).css("padding"))
}, time, "linear");

Данная конструкция работает в Chrome, но совершенно бесполезна в Edge и IE. Если указать значения руками вида "2px 10px", отрабатывают все. Возможно ли сделать иначе ?

РЕШЕНИЕ: для IE и Edge стоит забирать значения для каждой стороны отдельно и потом конактенировать в нужную строку-параметр.

UPD1: Почитал API, получается, что $(object).css(propertyName) возвращает строку вида значение (без кавычек). Из этого выходит, что Edge и IE не понимают. Добавил кавычки на концах, т.е. "\"" + $(object).css(propertyName) + "\"" После этого получается строка вида "значение". В таком виде все три браузера стали понимать одинаково, но ни один из них корректно не отрабатывает, а именно не растягивает те поля и отступы, которые уменьшались с помощью анимации перед растягиванием анимацией.

UPD2: Последовательность действий: 1. Нажать два раза по "ddd" 2. Нажать два раза по любому другому элементу.

 $(document).ready(function() { 
       var time = 200; 
       var delay = time + 100; 
 
       $(".icon-language").click(function() { 
         slide($(".rightBlockMenu i"), $(this), time); 
         $(".hidden").delay(delay).animate({ 
           width: "show" 
         }, time, "linear"); 
       }); 
        
       $(".icon-search-1").click(function () { 
        slide($(".rightBlockMenu i"), $(this), time); 
      }); 
 
    $(".icon-user-o").click(function () { 
        slide($(".rightBlockMenu i"), $(this), time); 
    }); 
 
    $(".icon-basket").click(function () { 
        slide($(".rightBlockMenu i"), $(this), time); 
    }); 
}) 
 
function slide(selector, object, time) { 
       if (selector.not(object).css("display") != "none") { 
         selector.not(object).animate({ 
           width: "hide", 
           margin: "0px -1px", 
           padding: "9px 0px" 
         }, time, "linear"); 
         $(object).animate({ 
           margin: "0" 
         }, time).addClass("active_i"); 
       } 
       if (selector.not(object).css("display") == "none") { 
         selector.each(function (){ 
           if ($(this).is(selector.last())) { 
             $(this).animate({ 
               width: "show", 
               margin: "0 0 0 6px", 
               padding: "\"" + $(object).css("padding") + "\"" 
             }, time, "linear"); 
             $(this).removeClass("active_i"); 
           } else { 
             $(this).animate({ 
               width: "show", 
               margin: "0 6px", 
               padding: "9px 18px" 
             }, time, "linear", function() { 
               if ($(this).is(selector.first())) { 
                 $(this).css("margin-left", "0"); 
               } 
             }); 
             $(this).removeClass("active_i"); 
           } 
         }); 
     } 
     }

.header_top { 
  height: 100px; 
  position: relative; 
} 
 
.rightBlock { 
  max-height: 100%; 
  padding-right: 10px; 
  float: right; 
  right: 0; 
  text-align: right; 
} 
 
.rightBlockMenu { 
  color: hsla(0, 0%, 80%, 1); 
  font-size: 2.7em; 
  vertical-align: middle; 
  display: inline-block; 
} 
 
.rightBlockMenu i:last-child { 
  margin-right: 0; 
} 
 
.rightBlockMenu i:first-child { 
  margin-left: 0; 
} 
 
.rightBlockMenu i:hover { 
  color: hsla(0, 70%, 45%, 1); 
  cursor: pointer; 
} 
 
.rightBlockMenu i { 
  padding: 9px 18px; 
  margin: 0 6px; 
  vertical-align: bottom; 
  border: 1px solid hsla(0, 0%, 80%, 1); 
  display: inline-block; 
} 
 
.active_i { 
  color: hsla(0, 70%, 45%, 1); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="header_top"> 
  <div class="rightBlock"> 
     
    <div class="rightBlockMenu"> 
      <i class="icon-language">aaa</i> 
      <i class="icon-search-1" >bbb</i> 
      <i class="icon-user-o" >ccc</i> 
      <i class="icon-basket" >ddd</i> 
    </div> 
  </div> 
</div>