Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   if/else, анимации в зависимости от значений css (https://javascript.ru/forum/jquery/28104-if-else-animacii-v-zavisimosti-ot-znachenijj-css.html)

Blizzart 07.05.2012 19:24
if/else, анимации в зависимости от значений css
 
$(document).ready(function() { 
      $('.talksButton:has(p#topA)').click(function () {
if ($('#scroll').css('margin-top') == 360) {	 $('#scroll').animate({marginTop:'+=0'});	 }
else {$('#scroll').animate({marginTop:'+=35'}); }
}); 
       $('.talksButton:has(p#bottomA)').mousedown(function () {
if ($('#scroll').css('margin-top') <= -350) {	 $('#scroll').css({marginTop:'=-350'});	 }
else {$('#scroll').animate({marginTop:'-=35'}); }
}); 
});

Не пойму как сделать, чтобы margin-top переставал изменяться, например, когда станет меньше или равен -350 как в нижней функции. Подскажите, пожалуйста.
Сейчас условия игнорируется. пробовал другие варианты, переставали работать кнопки

atlantis 07.05.2012 21:40
Цитата:
Сообщение от Blizzart
Не пойму как сделать, чтобы margin-top переставал изменяться
Не совсем понял, что именно не должно изменять значение.
Значение так же изменяется в процессе работы анимации.

Blizzart 08.05.2012 09:58
Я просто не знаю как это работает по логике jquery, так бы я сделал если бы это был actionscript. Допустим без анимации:
$('.talksButton:has(p#bottomA)').mousedown(function () {
if ($('#scroll').css('margin-top') == -350) {	 $('#scroll').css({marginTop:'=-350'});	 }
else {$('#scroll').css({marginTop:'-=35'}); }
}); 
});

я предполагал, что когда значение станет margin-top:-350px, каждый клик будет приравнивать marginTop:'=-350', то есть блок никуда больше двигаться не будет. но когда доходит до -350px, всё равно продолжает вычитаться -35px.

atlantis 08.05.2012 13:05
Я не обратил внимание сразу... Вам нужно выставить конкретное значение (-350, -35 ...) или изменить значение относительно текущего (собственно это то что у вас и есть в коде, хоть и не совсем правильно)?

Blizzart 08.05.2012 16:20
atlantis, спасибо, что обратили внимание на мою тему. я пытаюсь сделать обычный скролл текста с помощью изменение положения блока(на 35px за клик) и overflow. у меня всё работает, кроме того что дойдя до конца(здесь это -350px) блок с текстом при клике продолжает подниматься, таким способом я хотел просто ограничить его перемещение.

atlantis 08.05.2012 18:53 
$(document).ready(function() { 
      $('.talksButton:has(p#topA)').click(function () {
if ($('#scroll').css('margin-top') == 360) {	 $('#scroll').animate({marginTop:'+=0'});	 }
else {$('#scroll').animate({marginTop:'+=35'}); }
}); 
       $('.talksButton:has(p#bottomA)').mousedown(function () {
if ($('#scroll').css('margin-top') <= -350) {	 $('#scroll').css({marginTop:'-350'});	 }
else {$('#scroll').animate({marginTop:'-=35'}); }
}); 
});

Blizzart 15.05.2012 12:47
atlantis, спасибо, за поправку, но, к сожалению, это не изменило работу скрипта.
я изменил скрипт так, что он стал работать лучше, но всё равно не так как я задумывал. с положительными значениями работает нормально, а с отрицательными делает по своему, например, в таком варианте блок перестает перемещаться дальше при значение -105px, то есть не доходит до -350px. с анимацией он проскакивает значение если быстро нажимать на кнопку. в условие , наверное, надо какой-то диапазон значений указать... 
var st = $('#scroll');
$('.talksButton:has(p#topA)').click(function () {
if (st.css('margin-top') == '0px') {     st.css('margin-top'), '0px';    }
else {st.css({marginTop:'+=35px'}); }
});
  $('.talksButton:has(p#bottomA)').click(function () {
if (st.css('margin-top') <= '-350px') {     st.css('margin-top'), '-350px';   }
else {st.css({marginTop:'-=35px'}); }
});
}

Blizzart 16.05.2012 03:01
Вот этот вариант работает как надо!
$('.talksButton:has(p#topA)').click(function () {
var st = parseInt($('#scrollinner').css('margin-top'));
if (st > 0) {     $('#scrollinner').css('margin-top'), '0px';    }
else {$('#scrollinner').css({marginTop:'+=33.5px'}); }
});
$('.talksButton:has(p#bottomA)').click(function () {
var st = parseInt($('#scrollinner').css('margin-top'));
if (st <= -165) {     $('#scrollinner').css('margin-top'), '165.5px';   }
else {$('#scrollinner').css({marginTop:'-=33.5px'}); }
});

В общем понял что в условие можно сравнивать только числовые значения. А как быть если я например хочу проверить display?

atlantis 16.05.2012 09:14
Что значит
Цитата:
Сообщение от Blizzart
в условие можно сравнивать только числовые значения
???

melky 16.05.2012 09:53
Цитата:
Сообщение от Blizzart (Сообщение 174697)
В общем понял что в условие можно сравнивать только числовые значения.
вообще, можно даже строки на больше\меньше сравнивать
alert( "Б" > "А" );

Цитата:
Сообщение от Blizzart (Сообщение 174697)
А как быть если я например хочу проверить display?
сравнивайте оператором равенства.
$element.css("display") === "none"

а ещё лучше, использовать возможности квери - селектор :visible . вы ведь её не просто так подключали?
$element.is(":visible") // элемент виден

Blizzart 16.05.2012 11:38
действительно, это проще чем я думал. благодарю!


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