JQuery с ключом css3 keyCode = 37 и 39

Question

Я проверил оба способа. Анимация jquery и переход css3, а css3 немного быстрее. Но у меня проблема со следующим кодом:

 $(document).keydown(function(e){
if (e.keyCode == 39) { 
    var DocHeight = $(document).height();
    $('.container').css("margin-top","-="+DocHeight)
}
});

если я дважды нажму на код клавиши 39 (стрелка вправо), тогда мой переход будет космическое пространство . У кого-нибудь есть решение для этой вещи?

космическое пространство

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

пример: хит # 1 margin-top имеет значение 0px и достигает 1024px. но когда я ударяю его дважды, вершина маржи составляет 23px, а останавливается на 1047px.

Это не то, что я хочу. Он должен остановиться на 1024px.

Я надеюсь на это.

Answer 1

Попробуйте это:

$(document).keydown(function(e) {

    var DocHeight = $(document).height();
    if (DocHeight > 1024) {
        $('.container').css("margin-top", "1024px")
    } else {
        if (e.keyCode == 39) {
            $('.container').css("margin-top", "-=" + DocHeight)
        }
    }

});

Этот код просто проверяет, превышает ли DocHeight значение 1024 или нет.

Найти демо здесь: http://jsfiddle.net/shawn31313/fRYwM/
Я использую $('.container').css("margin-top", "+=" + DocHeight) для примера, но использование его с - также будет работать.

Редактировать: (я знаю, вам это не нужно):

Я редактировалкод, чтобы он работал в два раза лучше:

$(document).ready(function() {
    check();
});
$(document).keydown(function(e) {
    var DocHeight = $(document).height();
    if (DocHeight > 1024) {
        $('.container').css("margin-top", "1024px")
    } else {
        if (e.keyCode == 39) {
            if (DocHeight > 1024) {
                $('.container').css("margin-top", "1024px")
            }
            $('.container').css("margin-top", "+=" + DocHeight)
        }
    }

});
$(document).keyup(function(e) {
    var DocHeight = $(document).height();
    if (DocHeight > 1024) {
        $('.container').css("margin-top", "1024px")
    }
});
function check() {
    if (DocHeight > 1024) {
        $('.container').css("margin-top", "1024px")
    }
    check();
}

Демонстрация для этого: http://jsfiddle.net/shawn31313/fRYwM/1/

Answer 2

Попробуйте

var mTop = 0;
$(document).keydown(function(e){
  if (e.keyCode == 39) { 
    var DocHeight = $(document).height();
    mTop = mTop - parseInt(DocHeight);
    $('.container').css("margin-top", mTop);
  }
});

Это просто продолжается, если вы просто хотите, чтобы он оживил один раз и остановился, попробуйте что-то вроде:

var mTop = 0;
$(document).keydown(function(e){
  if (e.keyCode == 39) { 
    var WinHeight = $(window).height();
    mTop = parseInt(WinHeight);
    $('.container').css("margin-top", -mTop);
  }
});

Использование высоты документа - плохая идея при перемещении материала с полями, также простое добавление высоты документа к CSS каждый раз с "- =" вызовет проблемы, когда вы нажмете кнопку до завершения анимации и добавите к значение, которое находится где-то между, вы должны вместо этого сделать математику в переменной и использовать эту переменную для установки согласованности css.

Answer 3

Если вы используете jquery animate, тогда вы можете использовать .is(":animated"), чтобы запустить новую анимацию, только если она еще не запущена.

var $container = $('.container');

if (e.keyCode == 39 && !$container.is(":animated")) { 
    var DocHeight = $(document).height();
    $container.animate(...)
}

Это запустит анимацию, только если она еще не запущена.