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 как в нижней функции. Подскажите, пожалуйста. Сейчас условия игнорируется. пробовал другие варианты, переставали работать кнопки |
Цитата:
Значение так же изменяется в процессе работы анимации. |
Я просто не знаю как это работает по логике 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. |
Я не обратил внимание сразу... Вам нужно выставить конкретное значение (-350, -35 ...) или изменить значение относительно текущего (собственно это то что у вас и есть в коде, хоть и не совсем правильно)?
|
atlantis, спасибо, что обратили внимание на мою тему. я пытаюсь сделать обычный скролл текста с помощью изменение положения блока(на 35px за клик) и overflow. у меня всё работает, кроме того что дойдя до конца(здесь это -350px) блок с текстом при клике продолжает подниматься, таким способом я хотел просто ограничить его перемещение.
|
$(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'}); }
});
});
|
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'}); }
});
}
|
Вот этот вариант работает как надо!
$('.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? |
Что значит
Цитата:
|
Цитата:
alert( "Б" > "А" ); Цитата:
$element.css("display") === "none"
а ещё лучше, использовать возможности квери - селектор :visible . вы ведь её не просто так подключали?
$element.is(":visible") // элемент виден
|
| Часовой пояс GMT +3, время: 09:46. |