There is such a block:

<div id="block" style="bottom: 4%; position: absolute;"></div>

Such a link:

 <a href="#" id="menu">menu</a>

It is necessary that when you click on a link, the #block block receives the style "bottom: 10%" and when you click back again, it receives the style bottom: 4%

I myself wrote a cool thing:

 var _menu = $("#menu"); var _block = $("#block"); _menu.click(function () { if(_block.css('bottom', '4%')) { _block.animate({ 'bottom':'10%' },300); } else { _block.animate({ 'bottom':'4%' },300); } });

Error in my code: when clicking on a link, the block gets the margin style: 4% and immediately gets back 10%; (goes down and goes up). Help solve the problem, please.

    2 answers 2

    First, in this way

     _block.css('bottom', '4%')

    you set the value to bottom , not read it.
    To read the value, omit the second argument. Like this:

     _block.css('bottom')

    Secondly, javascript will return the calculated value in pixels , not in percents.
    Third, the use of inline-styles is generally considered bad form.

    There is no direct way to get a percentage value. However, this does not mean that it is generally impossible.

    The simplest (in terms of code) option, if the value of the bottom is written as you have in inline-styles :

     var _menu = $("#menu"); var _block = $("#block"); _menu.click(function () { if (_block[0].style.bottom === '4%') { _block.animate({ 'bottom': '10%' }, 300); } else { _block.animate({ 'bottom': '4%' }, 300); } });

    The variant is more complicated, which is able to read the value not only from inline-styles, but also from ordinary ones.

     var _menu = $("#menu"); var _block = $("#block"); _menu.click(function () { /* Высота нашего блока */ var bH = parseFloat($('#block').css('bottom')); /* Высота родителя блока, по умолчанию берем высоту окна */ var bParentH = $(window).height(); /* Перебираем всех родителей нашего блока (уже отсортированы по близости) */ _block.parents().each(function() { /* Высота элемента родителя */ var elementH = Math.ceil(parseFloat($(this).css('height'))); /** * Интересуют только те элементы, у которых заданы: * - относительное позиционирование * - высота */ if ($(this).css('position') === 'relative' && elementH > 0) { bParentH = elementH; /* Выходим из цикла */ return false; } }); /* Значение из inline-стилей */ var bInlineHInPercentage = _block[0].style.bottom; /* Автоматически рассчитываемое значение */ var bCalculatedHInPercentage = Math.ceil(100 * bH / bParentH) + '%'; /* Приоритет отдаем значению из inline-стилей, если таковое есть */ var bHInPercentage = bInlineHInPercentage || bCalculatedHInPercentage; if (bHInPercentage === '4%') { _block.animate({ 'bottom': '10%' }, 300); } else { _block.animate({ 'bottom': '4%' }, 300); } });

    Option 1: positioning relative to the entire document
    Option 1: positioning inside a block
    Option 2: positioning relative to the entire document
    Option 2: positioning inside a block

    • 2
      Here is the first example of a greatly simplified: jsfiddle.net/oceog/A8mh7/6 - zb '
    • 2
      without interfering with the DOM classes - zb '
    • @eicto, special thanks for the great idea! I'll have to remember this trick. - VenZell
    • 2
      @VenZell, thanks, but which one did you like? here's another way you can do it :) jsfiddle.net/oceog/A8mh7/9 - zb '
    • @eicto, when writing a comment, I only saw the first option. In my opinion, all are good, but the 2nd version and the 3rd, as its logical development, I like more. :) - VenZell

    You cannot manipulate classes: .b4 {bottom: 4%} b10 {bottom: 10%}

     menu.click(function() { $('элемент').toggleClass('b4').toggleClass('b10'); });
    • Just do not forget about the transition or css-animation (@keyframes). In the original question, the transitions are animated. - Pavel Mayorov