JQuery If заявления и переменные

Question

По сути, у меня есть верхняя полоса, которая прокручивается вниз при включении. Я добавил слой верхней маски, чтобы сделать его темнее. Я хочу, чтобы верхняя маска была видна, когда значение css top = -180.

В настоящее время проблема заключается в том, что переменная (css top value) не обновляется постоянно.

$('.topmask').hover(function () {
    $('.topbar').stop().animate({"top":"0px"});
    visible1 = $('.topbar').css('top');
});

$('.topbar').mouseleave(function () {
    $(this).stop().animate({"top":"-180px"});
});

var visible1 = $('.topbar').css('top');;console.log(visible1);
var visible = parseFloat(visible1); 

if (visible = -180) {
    $('.topmask').show();
} else {
    $('.topmask').hide();
}

А вот ссылка на JSfiddle, который я быстро сделал, чтобы лучше продемонстрировать проблему, поскольку я, очевидно, плохо объясняю. http://jsfiddle.net/Fregos/DyrK5/

Answer 1

Анимации выполняются асинхронно, поэтому при расчете top анимация еще не завершена.Как насчет отображения и скрытия верхней панели на основе обратного вызова, запущенного после завершения анимации?

$('.topmask').hover(function () {
    $('.topbar').stop().animate({"top":"0px"}, function() {
        $('.topmask').hide('fade');
    });
});

$('.topbar').mouseleave(function () {
    $(this).stop().animate({"top":"-180px"}, function() {
        $('.topmask').show('fade');
    });
});

Рабочий пример при http://jsfiddle.net/DyrK5/1/.

Answer 2

Здесь довольно много проблем.Прежде всего, вы должны установить действие, чтобы показать или скрыть маску в качестве обратного вызова функции анимации.Вот что происходит, когда страница впервые загружается для вас:

1. Если пользователь наводит курсор на верхней панели, выполните анимацию.
2. Если пользователь перестает зависать на верхней панели, выполните анимацию.
3. Если позиция верхней панели -180px, покажите маску.В противном случае скройте его.

То, что вам действительно нужно, это:

1. Если пользователь наводит курсор на верхней панели, выполните анимацию.По завершении анимации скройте маску.
2. Если пользователь перестает зависать на верхней панели, выполните анимацию.По завершении анимации покажите маску.

Так что вам нужно либо условно скрыть, либо показать маску в связанном событии или в обратном вызове анимации.Для получения дополнительной информации о настройке обратного вызова для функции animate посмотрите на это: http://api.jquery.com/animate/

Другая заметная явная ошибка, которую я вижу, состоит в том, что в настоящее время вы устанавливаете значение visible в -180 в вашем условном выражении.оператор.

if (visible = -180) { ... }

- это не то же самое, что:

if (visible == -180) { ... }

Answer 3

Почему бы просто не сделать:

$('.topmask').hover(function () {
    $('.topbar').stop().animate({"top":"0px"});
    $('.topmask').hide();
});
$('.topbar').mouseleave(function () {
    $(this).stop().animate({"top":"-180px"}, function() {
        $('.topmask').show();
    });
});