jQuery вкладки исчезают и проблемы с укладкой - PullRequest
Новая
       29

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

0 голосов
/ 04 октября 2011

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

http://artmodish.com/ithos/Content/us.php

$(document).ready(function(){
$('#info-tabs .inner:first').fadeIn(200);
$('#info-tabs li:first').addClass('current-tab');

$('#info-tabs li').stop().mouseover(function(){
    var current = $(this);
    $('#info-tabs li').each(function(){
        $(this).removeClass('current-tab');
    });
    current.addClass('current-tab');

    $('#info-tabs .inner').each(function (){
        var thisInner = $(this);
        if(thisInner.attr('id')==current.attr('id')) {
            $('#info-tabs div div').filter(':visible').fadeOut(500,function(){
                thisInner.fadeIn(200);
            });
        }
    });
});
});

1 Ответ

1 голос
/ 05 октября 2011

Проблема заключается в задержке между настройкой current и ее использованием.Если навести курсор на другую вкладку в анимации 500 мс, обработчик будет вызван дважды (с различными значениями для current) и покажет содержимое для двух вкладок.

Самый простой способ сделать это - превратить current в глобальную переменную, чтобы на всех анимациях после завершения части 1 отображалась одна и та же вкладка (последняя, ​​над которой вы работали).

$(function ()
{
    var current;

    $('#info-tabs .inner:first').fadeIn(200);
    $('#info-tabs li:first').addClass('current-tab');

    $('#info-tabs li').mouseover(function ()
    {
        current = $(this);
        $("#info-tabs li").removeClass("current-tab");
        current.addClass("current-tab");
        $("#info-tabs .inner:visible").fadeOut(500, function () { $("#info-tabs .inner#" + current.attr("id")).fadeIn(200); });
    });
});

Однако это не идеально, так как вы получаете нежелательную «глобальную» переменную и можете создать большую очередь анимации (я получил до 9 с неистовым движением мыши).

Я попытался обойти это, очистив очередь в начале обработчика наведения мыши (и установив его для завершения анимации).Это своего рода работает (конечный результат в порядке), но это дает некоторые неудачные вспышки контента в пути.Гектометр(Мне пришлось убрать fadeIn из fadeOut, чтобы я мог гарантировать, что он будет завершен к остановке.) 

$(function ()
{

    $('#info-tabs .inner:first').fadeIn(200);
    $('#info-tabs li:first').addClass('current-tab');

    $('#info-tabs li').mouseover(function ()
    {
        var current =  $(this);

        $("#info-tabs *").stop(true, true);    
        $("#info-tabs li").removeClass("current-tab");
        current.addClass("current-tab");
        $("#info-tabs .inner:visible").fadeOut(500);
        $("#info-tabs .inner#" + current.attr("id")).delay(500).fadeIn(200);
    });
});

(Также убрал каждый вызов, так как он не был действительно необходим.)

...