Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   jquery marginTop (https://javascript.ru/forum/jquery/43025-jquery-margintop.html)

sanchous1 18.11.2013 22:28

jquery marginTop
 
Здравствуйте, подскажите, пожалуйста. Есть функция. При клике на кнопке выполняет следующее действие $("#container_scr").animate({marginTop: "+=50px"},500);
Скажите, как правильно поставить условие на эту функцию, чтобы при достижении marginTop элемента 500px функция не срабатывала. В jquery не силен. Заранее спасибо.

mi.rafaylik 18.11.2013 22:52

sanchous1,
Если можно установить margin-top через .animate, значит и получить его можно - через .css.
Посмотреть
$('#button').click(function() {
	var marg = parseInt($('#container_scr').css('marginTop'), 10);
	if (marg < 500) {
		$('#container_scr').animate({marginTop: '+=50px'}, 500);
	}
});

sanchous1 18.11.2013 23:11

Огромное спасибо! Работает! :)

рони 18.11.2013 23:43

Цитата:

Сообщение от sanchous1
при достижении marginTop элемента 500px функция не срабатывала.

если нужна точность ...
<!DOCTYPE HTML>
<html>

  <head>
    <style>
      #button {
        display:inline-block;
        cursor:pointer;
        background:#bbbbbb;
        padding:3px;
      }
      #container_scr {
        width:100px;
        height:100px;
        background:green;
      }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script>
      $(document).ready(function () {
        $('#button').click(function () {
          var l = 500;
          $('#container_scr').animate({marginTop: "+=50px"},{step: function( x ) {if(x > l) $(this).stop().css({marginTop: l});
             },duration : 500 });

          })
        });

    </script>
  </head>

  <body>
    <div id="button">button</div>
    <div id="container_scr">element</div>
  </body>

</html>


Часовой пояс GMT +3, время: 01:56.