Форум

korih · #1 (**permalink**) 17.06.2016, 22:51

Добрый вечер всем!
вопрос первый:
где можно вычитать все свойства jquery функции animate? (height, opacity, borderWidth и тд и тп).
вопрос второй:
как проще всего сделать обработчик по второму клику?
к примеру юзаю по кнопке и рамка увеличивается. юзаю второй раз и она уменьшается до первоначального значения (обратный эффект).
сейчас делаю таким методом:

var scroll = 0;
	
	$("#news").click(function() {	
		if(scroll == 0){
		$(".right").animate({marginLeft:"60%"}, 350);
		$(".right").css({boxShadow: "inset 15px 0px 8px -10px rgba(163, 163, 163, 0.7)"});
		$("#news").animate({borderHeight: "10px"}, 350);		
		scroll++;
		}else{
			$(".right").animate({marginLeft:"0px"}, 350);
			$("#news").animate({borderWidth: "0"}, 350);
			setTimeout(function(){$(".right").css({boxShadow: "none"});}, 350);
			scroll--;
		}
	});

можно ли как-то укоротить функцию и сделать более красивее? не используя ту же проверку значения.

рони · #2 (**permalink**) 17.06.2016, 22:59

Сообщение от korih

где можно вычитать все свойства jquery функции animate?

все css имеющие одно цифровое значение

korih · #3 (**permalink**) 17.06.2016, 23:04

спасибо за ответ, а если нужно по клику нужно сделать плавное появление тени, то через animate это уже не реализовать?

рони · #4 (**permalink**) 17.06.2016, 23:20

Сообщение от korih

borderHeight

korih · #5 (**permalink**) 17.06.2016, 23:22

Сообщение от рони

извиняюсь, borderWidth )

рони · #6 (**permalink**) 17.06.2016, 23:25

korih,
animate работает с числами, пишите что нужно изменить на каждом шаге step -- от animate получите число и вставите в css()

рони · #7 (**permalink**) 17.06.2016, 23:27

korih,
setTimeout тоже лишний, то что вы написали встроено в animate

korih · #8 (**permalink**) 17.06.2016, 23:31

Можете пожалуйста написать простой пример?

к примеру если делать так

$(...).animate({var:value},function(){$(...).css({var:value});});

то функция css проявляется мгновенно, без плавного перехода

Rasy · #9 (**permalink**) 17.06.2016, 23:34

<body>

<style>
.right {
  display: block;
  
  width: 90px;
  height: 90px;
  
  background-color: lightpink;
}

#news {
  display: block;
  
  width: 60px;
  height: 40px;
  
  border: 0 solid coral;
}
</style>

<div class="right"></div>
<button id="news">click</button>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<script>
var
  $button = $('#news'),
  $elem = $('.right');

$button.on('click', function(e) {
    $(this).animate({
      borderWidth: '10px'
    }, {
      duration: 350,
      esing: 'linear',
      complete: function() {
        $(this).animate({
          borderWidth: '0'
        });
      }
    });

    $elem.css('box-shadow', 'inset 15px 0px 8px -10px rgba(163, 163, 163, 0.7)')
    .animate({
      marginLeft:"60%"
    },{
      duration: 350,
      easing: 'swing',
      complete: function() {
        $(this).css('box-shadow', 'none')
        .animate({
          marginLeft: '0'
        });
      }
    }); 
});
</script>

</body>

korih · #10 (**permalink**) 17.06.2016, 23:39

спасибо за напутствие)

Форум

Справочник

Discord чат

Курсы javascript