JQuery Анимация Проблемы - PullRequest
Новая
       20

JQuery Анимация Проблемы

1 голос
/ 11 марта 2011

Здесь есть демоверсия сверх здесь , и вот мой текущий jQuery: 

var height1 = $('.spotlight:nth-child(1)').height();
var height2 = $('.spotlight:nth-child(2)').height();

$('.spotlight').each(function() {
    var spot = $( this ),
        caption = $("<div class='caption'></div>").appendTo(spot);

    caption.load( spot.data('who') + '.html' );
    spot.hover(function() {
    caption.clearQueue().animate({ top :  '-=100px' }, 150)
    }, function () {
      caption.clearQueue().animate({ top : '+=100px' }, 150)
    });
});

$('.spotlight:nth-child(1) .caption').css('top', height1 + 'px');
$('.spotlight:nth-child(2) .caption').css('top', height2 + 'px');

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

Ответы [ 3 ]

0 голосов
/ 11 марта 2011

Возможно, вы должны использовать вместо этого функцию .animate.

http://api.jquery.com/animate/

0 голосов
/ 11 марта 2011

Частично проблема может заключаться в том, что анимация определяется как дельта (- = 100px).Если эта анимация активируется несколько раз, она продолжит ползти вверх по вашему div.Я понимаю, что вы пытаетесь предотвратить многократную активацию анимации.Я был в состоянии перекодировать, используя абсолютные позиции.Я не вижу проблем.Проверьте это здесь:

http://jsfiddle.net/waDVX/

Вот код:

HTML 

<div class="spotlight" data-who="staff"> 
    <div class="caption">
        <h1>Lipsum</h1>
        <p> There are many variations of passages of Lorem Ipsum available</p>
    </div>      
</div> 

<div class="spotlight" data-who="student"> 
    <div class="caption">
        <h1>Test</h1>
        <p>testtestt estte stte sttest testte sttesttestt esttestte sttest</p>
    </div>
</div>

CSS 

* {
    margin:0;
    padding:0;
}

.spotlight {
    position:relative;
    overflow:hidden;
    width:270px;
    float:left;
    margin:20px;
    height:240px;
    background:#008ad0;
}
.caption {
   position:relative;
   opacity: 0.8;
   padding:10px;
   background:#000;
   color:#fff;
}

jQuery 

$(function() {
    $('.spotlight').each(function() {
        var spot = $(this);
        var spotHeight = spot.outerHeight();
        var caption = $(".caption", spot);
        var height = caption.outerHeight();
        var top2 = spotHeight - height;
        var top1 = spotHeight;
        caption.css({top:top1});
        spot.hover(function() {
            caption.stop().animate({ top:top2 }, 150);
        }, function() {
            caption.stop().animate({top:top1}, 150);
        });
    });

});

Примечание. Я удалил загрузку подписей AJAX для простоты.

0 голосов
/ 11 марта 2011

Можете ли вы попробовать stop(false,true) вместо clearQueue()?

Проблема в том, что clearQueue удаляет незапущенные элементы (но у вас их не должно быть), а свойство top является верхним значениемтекущая анимация.

stop (false, true) не очистит очередь, но перейдет к концу анимации.Тогда вершина будет в порядке

...