使用jQuery動畫徽標

我有我想要的一個標誌，一旦用戶滾動過去的某個點被換出的文本。我已經有這方面的工作使用jQuery動畫徽標

的問題是，它只是交換兩個項目。我其實想要一個漂亮的動畫。也許徽標從頂部出現並推出文本。我不確定如何實現這一點。

的JavaScript

$(document).on('scroll', function() { 
    if($(window).scrollTop()> 200) { 
     $('#logo2').show(); 
     $('#logo1').hide(); 
    } 
    else { 
     $('#logo2').hide(); 
     $('#logo1').show(); 
    } 
});

來源

2015-04-21 onTheInternet

請再具體些。例如，你想要達到什麼樣的動畫，到目前爲止你嘗試了什麼？ – kapantzak

太模糊了，Google爲* jquery效果示例*提供了靈感。 –

採取在[jQuery用戶界面的.show（https://jqueryui.com/show/） – basher

簡單的褪色，您可以使用

$('#logo2').fadeOut(); 
$('#logo1').fadeIn();

或

$('#logo2').slideOut(); 
$('#logo1').slideIn();

對於更復雜的動畫，你將需要使用animate [http://api.jquery.com/animate/]並設置選擇離子

options = {123: 456}; 
$('#logo2').animate(options);

來源

2015-04-21 14:19:26 DrCord

您可以使用fadeOut/fadeIn來顯示淡入淡出效果。

$('#logo2').fadeOut(); 
$('#logo2').fadeIn();

您可以使用slideOut/slideIn顯示幻燈片效果，將動畫元素的高度。

$('#logo2').slideOut(); 
$('#logo2').slideIn();

如果你想創建自己的動畫，你可以使用animate()。

來源

2015-04-21 14:20:47 Tushar

https://jsfiddle.net/ybh22msj/1/

$('logo1').fadeOut("slow", function(){ $('#logo2').fadeIn("fast"); }); 
//and 
$('logo2').fadeOut("slow", function(){ $('#logo1').fadeIn("fast"); });

也許這是你在找什麼？它採用回調，這樣一旦淡出，然後另一個在變淡。

謝謝。

來源

2015-04-21 14:33:41 Ronnie

使用jQuery動畫徽標

回答

相關問題