Абсолютная погрешность горизонтального аккордеонного баннера JQuery - PullRequest
Новая
       17

Абсолютная погрешность горизонтального аккордеонного баннера JQuery

1 голос
/ 02 ноября 2011

Следующий код управляет системой горизонтальной анимации на основе JQuery. 

$(document).ready(function(){
    maxWidth = 700;
    minWidth = 65;
    normWidth = 192;

    var featspos = 0;   

    $('.featuredslider a').each(function(){
        $(this).css('left', featspos+'px');
        featspos += 192; 
    });

     $(".featuredslider a").mouseenter(function(){
         var featscur = $(this).index();
         $('.featuredslider a').each(function(){
            featspos = 0;
            $(this).animate({left: featspos},800);
            if($(this).index() == featscur){ featspos += 700 } else { featspos += 65; };
         });
     });
     $(".featuredslider a").mouseleave(function(){
        $(this).css('left', featspos+'px');
        featspos += 192; 
     });
});

Здесь возникает проблема абсолютного позиционирования, потому что как только мышь входит в любую из картинок, все они перемещаются влево: 0px;Кроме того, функция их возврата также не будет работать.Они просто сидят там в 0px;

Я установил эталонную FIDDLE, поэтому надеюсь, что это поможет решить проблему.http://jsfiddle.net/FzaxF/1/

1 Ответ

0 голосов
/ 02 ноября 2011

Я сделал несколько изменений: http://jsfiddle.net/mblase75/FzaxF/6/

У вас был цикл .each в событии mouseenter, когда он должен был быть в mouseleave.Я также сбросил featspos в ноль в начале события mouseleave и добавил stop(), чтобы прервать анимацию, если пользователь отключил анимацию до ее завершения.

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

$(document).ready(function() {
    maxWidth = 700;
    minWidth = 65;
    normWidth = 192;

    function resetter() {
        var featspos = 0;
        $('.featuredslider a').each(function() {
            $(this).stop().css('left', featspos + 'px');
            featspos += 192;
        });
    }
    resetter();

    $(".featuredslider a").mouseenter(function() {
        var featscur = $(this).index();
        featspos = 0;
        $(this).animate({
            left: featspos
        }, 800);
        if ($(this).index() == featscur) {
            featspos += 700
        } else {
            featspos += 65;
        };
    });
    $(".featuredslider a").mouseleave(function() {
        resetter();
    });

});
...