如何獲得單擊動畫並顯示div的鏈接？

所以我有一個酒吧，我想要一個sign up link，當你點擊它時，顯示鏈接左邊的一些文本鏈接。如何獲得單擊動畫並顯示div的鏈接？

下面有一些視覺效果之前和之後。

我嘗試了一些JavaScript，但沒有得到太多，我想它動畫出來，但現在如果我不知道它的確定。任何想法？

enter image description here

來源

2012-07-21 Daniel Fein

爲什麼不使用jQuery？ – 2012-07-21 05:47:58

@paiCode這可能是因爲OP不希望在他們的文檔中包含一個庫。另一個原因可能是因爲他們不知道jQuery，或者不想學習它。 – starbeamrainbowlabs 2012-07-21 15:21:09

出於好奇，這是如何涉及PHP的？據我所知，php是服務器端 – starbeamrainbowlabs 2012-07-21 15:22:54

你可以使用jQuery嘗試使用

$(function() { 
$('#id').click(function(e){ 
    e.preventDefault(); 
    $("#id2").animate({height : '410'}; /* what ever the styles u need */ 


}); 

})

試試這個鏈接

http://www.w3schools.com/jquery/jquery_effects.asp

http://viralpatel.net/blogs/understanding-jquery-animate-function/

來源

2012-07-21 05:49:05 Prashobh

已經提供了一個javascript解決方案，您提供了jQuery – 2012-07-21 05:50:14

jQuery是一個使用JavaScript構建的框架，以幫助JavaScript程序員執行常見的Web任務。 – Prashobh 2012-07-21 05:52:43

@paiCode：jQuery是一個JavaScript庫，而不是一門語言。完成OP所需要的並不是一個簡單的方法。 – Blender 2012-07-21 05:52:55

$(document).ready(function() 
{ 
$('#id').click(function(e){ 
    e.preventDefault(); 
    $("#id2").animate({height : '410'}; /* what ever the styles u need */ 
}); 
});

不知道爲什麼你想把它放在另一個函數中。那會做。

來源

2012-07-21 10:04:15

也許你可以使用：目標僞類選擇器和一些CSS3轉換？在這種情況下，當您單擊鏈接時，div的不透明度發生變化並使其可見。我不確定你需要支持哪些瀏覽器？這不會在IE 7中運行或8

這裏的過渡代碼：

HTML

<a href="#id1">Sign Up</a>

CSS

#id1 { 

    opacity: 0;  
} 


#id1:target { 
    -webkit-transition: opacity 0.5s ease-in-out; 
     -moz-transition: opacity 0.5s ease-in-out; 
     -o-transition: opacity 0.5s ease-in-out; 
             opacity: 1;

演示 - jsFiddle

編輯：下面是我很快做出的第二個例子（幻燈片效果），所以它不是很流暢，但是它至少展示了什麼可能 - jsFiddle2（webkit）。

來源

2012-07-21 11:51:12

你可能會用jQuery得到這個。

爲您的sign up link指定一個您想要點擊的標識。
創建一個div，在鏈接下面有一定的高度，並給它所有的樣式，方式是當用戶單擊鏈接時讓它看起來像樣。
給該div一個css樣式height: 0px，這樣div現在就會消失。
使用jQuery .animate()函數在用戶單擊鏈接時切換（或更改）該div的高度。

你可以參考jQuery的.animate()文檔瀏覽：

希望這有助於..

來源

2012-07-21 12:41:45

如何獲得單擊動畫並顯示div的鏈接？

回答

相關問題