jQuery的動畫麻煩

有一個演示了here，這裏是我目前的jQuery是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（），但它們帶有自己的錯誤（如果移動速度太快或太慢）總之呢？

來源

2011-03-11 Koalatea

你是什麼意思關於「動畫循環」？在任何情況下，都不確定，但我注意到，如果我在兩個div之間快速移動鼠標，滑動文本最終會停止滑出。我認爲這是因爲你正在使用「 -/+ = 100」，並且當第一個結束之前鼠標觸發另一個事件時，它會將「頂部」數學擰緊，並將文本向下移動。 – ilia 2011-03-11 15:03:45

@Val：藍色的bg確實有懸停...... @ilia：這正是發生了什麼，但我不知道如何解決它。 – Koalatea 2011-03-11 15:10:00

好的是我的壞:)'.stop（true，true）'可能是答案或嘗試並重置頂部的位置到其默認b4'.animate（）'並刪除'clearQueue（）' – Val 2011-03-11 15:12:57

您可以試試stop(false,true)而不是clearQueue()？

問題是clearQueue刪除不運行項目（但你不應該有一些），並且top屬性是當前動畫的最高值。

stop（false，true）不會清除隊列，而是跳到動畫結束。然後頂部將是OK

來源

2011-03-11 15:02:47

這似乎工作，萬分感謝！ – Koalatea 2011-03-11 15:20:12

Perhap你應該使用.animate函數。該問題的

來源

2011-03-11 15:15:15 Desi

好的一個問題你有多高？ – Val 2011-03-11 15:16:12

我對Val的後續問題...我在哪裏可以得到一些？ – 2011-03-11 15:20:49

它已經在使用.animate（） – Koalatea 2011-03-11 15:21:04

部分可能是動畫被定義爲一個三角形（ - = 100像素）。如果多次激活此動畫，它將繼續抓取您的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加載。

來源

2011-03-11 15:24:53 rcravens

這實際上更好，謝謝！ – Koalatea 2011-03-13 19:49:16

jQuery的動畫麻煩

回答

相關問題