我該如何在Javascript中完成橫向動畫？

我試圖讓div的動畫緩慢的側身是這可能與JavaScript我很新，這和任何幫助將不勝感激。提前致謝。我該如何在Javascript中完成橫向動畫？

的HTML是這裏

<a href="#blue">Show Blue</a> | <a href="#red">Show Red</a> | <a href="#green">Show Green</a> 

<div id="blue"></div> 
<div id="red"></div> 
<div id="green"></div>

的CSS是這裏

div { 
    display: block; 
    width: 100px; 
    height: 100px; 
    display: none; 
} 

#blue { 
    background: blue; 
} 

#red { 
    background: red; 
} 

#green { 
    background: green; 
}

和JavaScript

if(window.location.hash) { 
    var hash = window.location.hash; 
    $('div').hide(); 
    $(hash).show(); 
} 

$(window).on('hashchange', function() { 
    var hash = window.location.hash; 
    $('div').hide(); 
    $(hash).show(); 
});

小提琴是這裏http://jsfiddle.net/aUsHh/3/

來源

2013-12-11 Adewumi Adebayo

小提琴在這裏http://jsfiddle.net/aUsHh/3/ –

您可能需要使用相對定位容器內的絕對定位的一套彩色的div。看到這一點：

http://jsfiddle.net/aUsHh/13/

CSS：

#slidercontainer { 
    display: block; 
    position: relative; 
    width: 100px; 
    height: 100px; 
} 
#slidercontainer div { 
    position: absolute; 
    display: block; 
    width: 100px; 
    height: 100px; 
    top: 0px; 
    left: 0px; 
    opacity: 0; 
} 
#blue { 
    background: blue; 
} 

#red { 
    background: red; 
} 

#green { 
    background: green; 
} 
}

JS：

var hash = ""; 
if(window.location.hash) { 
    if (hash != "") 
    $(hash).hide("slow"); 
    hash = window.location.hash; 
    $(hash).show("slow"); 
} 

$(window).on('hashchange', function() { 
    $(hash).animate({'opacity': 0, 'left': "200px"}); 
    hash = window.location.hash; 
    $(hash).css("left","-100px"); 
    $(hash).animate({'opacity': 1, 'left': "0px"}); 
});

來源

2013-12-11 06:47:10

完美實現了我想要的感謝一羣 –

@AdewumiAdebayo酷，很高興我能幫上忙。 –

你可以試試下面的代碼...

if(window.location.hash) { 
    var hash = window.location.hash; 
    $('div').hide("slow"); 
    $(hash).show("slow"); 
} 

$(window).on('hashchange', function() { 
    var hash = window.location.hash; 
    $('div').hide("slow"); 
    $(hash).show("slow"); 
});

或一些滑動效果

if(window.location.hash) { 
    var hash = window.location.hash; 
    $('div').slideUp("slow"); 
    $(hash).slideDown("slow"); 
} 

$(window).on('hashchange', function() { 
    var hash = window.location.hash; 
    $('div').slideUp("slow"); 
    $(hash).slideDown("slow"); 
});

來源

2013-12-11 06:34:42 Neel

感謝它的慢，但沒有達到幻燈片的效果，你能幫我那麼做 –

if(window.location.hash) { 
    var hash = window.location.hash; 
    $('div').slideUp(); 
    $(hash).slideDown(); 
} 

$(window).on('hashchange', function() { 
    var hash = window.location.hash; 
    $('div').slideUp(); 
    $(hash).slideDown(); 
});

JSFiddle

來源

2013-12-11 06:43:39 droptheplot

嘗試這樣

if(window.location.hash) { 
    var hash = window.location.hash; 
    $('div').hide(1000); 
    $(hash).show(1000); 
} 

$(window).on('hashchange', function() { 
    var hash = window.location.hash; 
    $('div').hide(1000); 
    $(hash).show(1000); 
});

JS你可以在jQuery的隱藏使用時間並顯示功能。它是1000 = 1秒。或用戶一鍵字「慢」爲默認這樣

$('div').hide('slow'); 
$(hash).show('slow');

來源

2013-12-11 06:47:10

我會建議使用fadeIn()

if(window.location.hash) { 
    var hash = window.location.hash; 
    $('div').hide(); 
    //change value accordingly for time 
    $(hash).fadeIn(3000); 
} 

$(window).on('hashchange', function() { 
    var hash = window.location.hash; 
    $('div').hide(); 
    //change value accordingly for time 
    $(hash).fadeIn(3000); 
});

Fiddle Link

來源

2013-12-11 06:49:41 Rex

我該如何在Javascript中完成橫向動畫？

回答

相關問題