Javascript-форум - все свойства $.animate и событие по второму клику

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - все свойства $.animate и событие по второму клику (https://javascript.ru/forum/misc/63604-vse-svojjstva-%24-animate-i-sobytie-po-vtoromu-kliku.html)

все свойства $.animate и событие по второму клику

Добрый вечер всем!
вопрос первый:
где можно вычитать все свойства 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--;
		}
	});

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

Цитата:

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

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

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

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

Цитата:

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

borderHeight

:blink:

Цитата:

Сообщение от рони (Сообщение 419781)

:blink:

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

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

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

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

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

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

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

<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,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .news  {
     border: 0px solid #FF0000;
     transition: all .35s ease-out;
   }
    .right{
      box-shadow: none;
      margin-left:0;
      transition: all .35s ease-out;
      border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px;
    }
    .active  .right{
      margin-left:60%;
      box-shadow: inset 15px 0px 8px -10px rgba(163, 163, 163, 0.7 );
    }
   .active.news{
      border: 10px solid #FF0000;
   }

 </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
 $(function(){


	$(".news").click(function() {
     $(this).toggleClass("active")
	});

   })
  </script>
</head>

<body>

  <div class="news"><div class="right">ok</div></div>

</body>
</html>

Цитата:

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

простой пример?

$(".right").animate({
	    marginLeft: "0px"
	}, 350, function() {
	    $(this).css({
	        boxShadow: "none"
	    })
	});

korih,
анимация тени

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .news  {
     border: 10px solid #FF0000;
     height: 100px; width: 100px;
   }
    .right{
      border: 1px dashed Gray; padding: 5px; height: 90px; width: 90px;
    }


 </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
 $(function(){



	$(".news").click(function() {
     $({x : 8}).animate({x : 140}, {easing : 'linear',duration : 1000,step : function(el) {
      	$(".right").css({boxShadow: "inset 15px 0px "+(el|0)+"px -10px rgba(163, 163, 163, 0.7)"});
},});
	});

   })
  </script>
</head>

<body>

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

</body>
</html>

теперь разобрался полностью, безумно благодарю) и ещё один вопрос, правда не по теме, но что бы не создавать новый топик...
вся моя страница имеет overflow:hidden.
всё что я выше разбирал с вами имеет следующую последственность:
я нажимаю на кнопку которая находиться с левой стороны и правая сторона сайта отодвигается, с верху выпадает перечень блоков (новостная лента). вопрос заключается в следующем:
как при прокрутке колёсиком двигать эти блоки вверх-вниз зависимо от стороны прокрутки колёсиком. т.к. всё за пределами границ родительского блока скрыта, то полосы прокрутки не появляется само-собой и $(window).scroll() функию я не могу применить. посоветуйте как лучше это реализовать пожалуйста. надеюсь суть описал понятно

вот изображения для понятности:
http://hkar.ru/Jfj3

скролл по блочно

Цитата:

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

страница имеет overflow:hidden.

Цитата:

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

как при прокрутке колёсиком двигать эти блоки вверх-вниз зависимо от стороны прокрутки колёсиком.

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  *{
    margin:0;
    padding: 0;
  }

  article  {
    width: 100%;
    height: 200px;
    text-align: center;
     font-size: 4em;
     line-height: 2.6em;
  }
  article:nth-child(2n) {
    background: #FFCC00;
    color: #FFFFFF;
  }
  body{
    overflow: hidden;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(function() {
    function d() {
        b = !1
    }
    var b = !1;
    $(window).on("mousewheel DOMMouseScroll", function(c) {
        c.preventDefault();
        if (!b) {
            b = !0;
            var a = $(this).scrollTop() / 200 | 0,
                a = 200 * a + (0 <= c.originalEvent.wheelDelta ? -200 : 200);
            0 > a || a > $("html").height() + 200 - $(window).height() ? b = !1 : $("html, body")
            .not(":animated").animate({scrollTop: a}, 800, "swing", d)
        }
    })
});

  </script>
</head>

<body>

        <article class="article-post">01</article>
        <article class="article-post">02</article>
        <article class="article-post">03</article>
        <article class="article-post">04</article>
        <article class="article-post">05</article>
        <article class="article-post">06</article>
        <article class="article-post">07</article>
        <article class="article-post">08</article>
        <article class="article-post">09</article>
        <article class="article-post">10</article>
        <article class="article-post">11</article>
        <article class="article-post">12</article>
        <article class="article-post">13</article>
        <article class="article-post">14</article>
        <article class="article-post">15</article>
        <article class="article-post">16</article>
        <article class="article-post">17</article>
        <article class="article-post">18</article>
        <article class="article-post">19</article>
        <article class="article-post">20</article>
        <article class="article-post">21</article>



</body>

</html>

спасибо огромное! жаль, что нельзя несколько лайков ставить, очень помогли сегодня.