все свойства $.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--;
}
});
можно ли как-то укоротить функцию и сделать более красивее? не используя ту же проверку значения. |
Цитата:
|
спасибо за ответ, а если нужно по клику нужно сделать плавное появление тени, то через animate это уже не реализовать?
|
Цитата:
|
Цитата:
|
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>
|
Цитата:
$(".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 |
скролл по блочно
Цитата:
Цитата:
<!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>
|
спасибо огромное! жаль, что нельзя несколько лайков ставить, очень помогли сегодня.
|
| Часовой пояс GMT +3, время: 07:00. |