jquery動畫效果不如預期的那樣工作

這是第一次點擊這個紅色div，它從頁面的頂部一直進行動畫;我會期待它只能在隨後的點擊下去50個像素（這在事實上確實。這是怎麼回事？jquery動畫效果不如預期的那樣工作

我沒有真正使用過animate。我需要以某種方式指定起點？

謝謝

$(document).ready(function() { 
    $('.obscure').on('click', function() { 

     var blueDiv = $('.blue').clone(); 

     blueDiv.css({'display': 'none', 'z-index': '0', 'top' : y, 'position' : 'absolute'}); 

     $('#wrapper').append(blueDiv); 
     var obscure = $('.obscure'); 
     var offset = obscure.offset(); 
     var y = offset.top; 
     blueDiv.css('top', y); 
     blueDiv.show(); 

     //$('.obscure').css('z-index', 10000); 
     var off = parseInt(y) + 50; 
     console.log(y); 
     $('.obscure').animate({ 
      top : y + 50 
     }, 100); 


    }); 
});

http://jsfiddle.net/loren_hibbard/U7tAV/2/

來源

2012-11-13 1252748

不理解問題。你想在哪裏開始紅色的酒吧？它位於負載下的黃色條的正下方。 – Coby

@Coby的權利。當你點擊紅色欄時，它跳到頁面頂部，然後滑下。而不是簡單地滑下原來的開始位置。 – 1252748

似乎並沒有在Firefox中發生，但在Chrome中。

修復：http://jsfiddle.net/U7tAV/10/

我只是改變：

$('.obscure').animate({ 
     top : y + 50 
    }, 100);

到動畫.css('top', y)之前應用top位置：

$('.obscure').css('top', y).animate({ 
     top : y + 50 
    }, 100);

來源

2012-11-13 03:34:56 Coby

是的，這是我發現的修復。只是想看看它是不是太hacky！太感謝了！ – 1252748

你需要設置的不起眼的位置上。如果你減慢動畫速度，你會看到它到頂端，然後動畫到它應該在的位置。我加

obscure.css('top',offset.top);

和它的工作

$(document).ready(function() { 
    $('.obscure').on('click', function() { 

     var blueDiv = $('.blue').clone(); 

     blueDiv.css({'display': 'none', 'z-index': '0', 'top' : y, 'position' : 'absolute'}); 

     $('#wrapper').append(blueDiv); 
     var obscure = $('.obscure'); 
     var offset = obscure.offset(); 
     var y = offset.top; 
     blueDiv.css('top', y); 
     blueDiv.show(); 
     obscure.css('top',offset.top); // ADDED THIS 

     //$('.obscure').css('z-index', 10000); 
     var off = parseInt(y) + 50; 
     console.log(y); 
     $('.obscure').animate({ 
      top : y + 50 
     }, 100); 


    }); 
});

不完全肯定，但它確實工作。 http://jsfiddle.net/U7tAV/13/

來源

2012-11-13 03:41:10

jquery動畫效果不如預期的那樣工作

回答

相關問題