jQuery UI Показать проблемы с очередями вслепую



У меня возникли проблемы с кнопкой, к которой я пытаюсь применить анимацию.

Эффект, который я пытаюсь создать, заключается в том, что кнопка с белой рамкой и прозрачный фон заполняется белым цветом фона при наведении курсора слева направо и снова очищается слева направо, когда мышь пользователя гаснет. При этом цвет шрифта меняется на читаемый цвет.

Для этого у меня есть div с двумя a, которые расположены друг над другом. Почему два элемента? Таким образом, пользователь может щелкнуть тот, который находится сверху/показан.

HTML:

<div class="block-button"> <a href="#" class="first">Click me</a>
<a href="#" class="second"></a>

CSS

.block-button .first {
z-index: 8;
color: #fff;
}

.block-button .second {
z-index: 7;
background-color: white;

}

jQuery

 //Buttons
$("a.second").hide();
$(".block-button").each(function () {
    $(this).hover(function (e) {
        $(this).find("a.second").show("blind", {
            direction: "left",
            easing: 'easeOutCubic'
        },500, function () {
           //Callback
        });
    }, function (e) {
        $(this).find("a.second").hide("blind", {
            direction: "right",
            easing: 'easeOutCubic'
        }, 500, function () {
            //Callback
        });
    });
});

Однако у меня возникают проблемы с обработкой очереди слепой анимации. Обычно я бы решил это с помощью jQuery.stop(), но в данный момент он работает неправильно.

Когда я отключаю остановку, естественно, все анимации складываются, поэтому постоянное зависание / снятие зависания заставит анимацию повторяться снова и снова.

Однако, когда я включаю остановку, когда вы снова вводите элемент, пока он все еще анимируется (вы можете ясно видеть это при использовании высокой продолжительности в функции анимации), последняя анимация не вызывается правильно.

Это довольно сложно объяснить, но я думаю, что эти jFiddles делают это довольно ясным.

Остановка включена: jsFiddle здесь

Стоп отключен: jsFiddle здесь

Любая помощь будет оценена по достоинству!


button jquery jquery-ui jquery-hover
person Roy Dendro    schedule 16.02.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы слишком усложняете себе задачу. Все, что вам нужно сделать, это перекрыть два элемента; фон и передний план. Изменяя размер фона, вы можете анимировать кнопку.

Я переписал его полностью. Проверьте мою скрипку.

Используя position: absolute; и position: relative;, я перекрыл оба элемента. Динамическая ширина сохраняется, если вы хотите использовать несколько кнопок с разным текстом.

Поскольку я меняю width при наведении на метод animate(), stop() работает правильно.

person Tim S.    schedule 19.02.2013
comment
Хотя это не совсем тот эффект, которого я пытался добиться, ваша техника анимации ширины вместо использования функции jQuery-UI show('blind') действительно сработала. Я разместил свой окончательный код ниже. - person Roy Dendro; 19.02.2013

arrow_upward
0
arrow_downward

Я добился желаемого эффекта, используя технику, предложенную Тимом в его ответе. Анимация ширины фонового диапазона, казалось, помогла!

Javascript:

$('a.btn-pretty').hover(function(e) {
$(this).children('span.background').stop().animate({
    'width': $(this).width()
}, 300,function(){
    $('span.background').css({'right':'0','left':'auto'});   
});
}, function(e) {
$(this).children('span.background').stop().animate({
    'width': 0
}, 300,function(){
     $('span.background').css({'left':'0','right':'auto'}); 
});
});

Вы можете увидеть jsFiddle здесь

person Roy Dendro    schedule 19.02.2013