jQuery的動畫畫面上用同一個鏈接李麗

基本上，我想這種功能，但不太複雜：http://www.blueacorn.com/team/jQuery的動畫畫面上用同一個鏈接李麗

我有各種李時珍的UL含圖片，這將鏈接到只有一個LinkedIn賬戶（不推土機以及在這個例子中）。我希望當你將鼠標懸停在這些圖片之一上時，一個jQuery動畫將在其上顯示一個圖片，你將可以點擊它來到他們的LinkedIn。（最終，這些都將是不同的人的照片。）

這裏是我的JFiddle：http://jsfiddle.net/h5y64/

如果可能的話，我不想爲每個箱子創建一個id爲我準備讓他們的40+（和生長）。

我的主要問題是：

1）我不能讓divHover正確動畫本身對我懸停在圖片的頂部（它去所有的地方）

2）我不能！ divHover鏈接到不同的網頁。

我相信有一種方法可以讓我動態地做到這一點，但我無法弄清楚。

順便說一句，這個問題是類似的，但依賴於每個塊創建ID：How to position a hover div based on the position of the element

我還沒有真正能夠找到一個很好的例子（我會明白）。但這個問題很難描述，所以也許我錯過了。

我還是jQuery的新手，所以如果可能的話，請啞掉你的答案。 :)

在此先感謝！

來源

2012-10-02 user4016882

我知道，與自動過渡到隱藏的div懸停可以純粹CSS在這裏實現，許多例子（揚聲器頁）：http://futurem.org 也許我可以回來今晚的這個問題如果沒有給出答案。 –

我也注意到，您可以使用名爲「精靈」的圖像，這是一個兩個圖像的組合，當您想要爲精靈設置動畫時，可以使用溢出隱藏和絕對定位。 –

我已經做了一個快速的例子，我將如何做到這一點。就像在blueacorn上，我提前將覆蓋層添加到每個li，所以可以有多個可見。（如果一個人滑下來，其他人可以同時滑動）。

您的HTML中也存在一些問題，例如a約li，這是不允許的。

這裏是我的例子：

演示：

http://jsfiddle.net/bYcmc/

HTML：

<ul> 
    <li> 
     <div> 
      <img src="http://w3schools.com/css/klematis.jpg" /> 
      <a href=""></a> 
     </div> 
     <h6>Name 1</h6> 
    </li> 
    . 
    . 
    . 
</ul>

JS：

$('li').hover(function() { 
    $(this).find('a').stop().animate({ 
     'top': '0%' 
    }, 300); 
}, function() { 
    $(this).find('a').stop().animate({ 
     'top': '100%' 
    }, 300); 
})

來源

2012-10-02 21:32:00 Andy

我能夠實現這個代碼，一切都完美！（使成爲一個塊也是一個非常酷的主意。）非常感謝！ – user4016882

我會採取的做法this JSFiddle。要注意的重要部分是縮略圖的相對位置和divHovers的絕對位置。另外，請注意如何創建多個懸停元素，每個縮略圖一個。

編輯：我也做了適當的HTML直接嵌套<ul>內<li>元素，然後從那裏築巢錨標記。

來源

2012-10-02 21:41:53

這是我想要的功能;唯一的麻煩就是當快速連續徘徊在很多地方時，很多人都被圖像覆蓋卡住了。我認爲有一種方法可以清除它，但我嘗試了.stop（）。animate（）...但沒有任何更改。謝謝！ – user4016882

下面的代碼完美地按照您的要求。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Scroll - Up - Down</title> 
    <!-- SCRIPTS --> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 

     $(".scroll-up-down li").mouseover(function(){ 
      $(this).find("span.hover-link").show(); 
     }); 

     $(".scroll-up-down li").mouseout(function(){ 
      $(this).find("span.hover-link").hide(); 
     }); 


    }); 
    </script> 
    <!-- SCRIPTS --> 

    <!-- STYLES --> 
    <style type="text/css"> 

     body      { background:#CCC; font-family:Arial, Helvetica, sans-serif; } 
     h1       { font-size:16px; text-align:center; } 
     .scroll-up-down    { border:1px dashed #bbb; margin:0 auto; padding:0; text-align:center; width:400px; } 
     .scroll-up-down li   { display:inline-block; list-style:none; margin:10px; position:relative; text-align:center; width:100px; z-index:999; } 
     .scroll-up-down li span.hover-link    { background:url(hover-div.png) no-repeat; 
                  border:5px solid #000; 
                  color:#FFF; 
                  font-size:12px; 
                  font-weight:bolder; 
                  display:none; 
                  height:60px; 
                  left:0; 
                  list-style:none; 
                  padding-top:40px; 
                  position:absolute; 
                  filter: alpha(opacity=50); 
                  opacity: 0.5; 
                  text-align:center; 
                  top:0; 
                  vertical-align:bottom; 
                  width:100px; 
                  z-index:1000; 

            } 
     .scroll-up-down li span.hover-link a.linkedin-icon { background:url(linked-icon.png) no-repeat 0 -50px; display:inline-block; height:40px; width:40px; } 
     .scroll-up-down li span.hover-link a.linkedin-icon:hover { background-position:0 0; display:inline-block; height:40px; width:40px; } 
     .scroll-up-down li a span { font-size:12px; } 
     .scroll-up-down li a  { display:inline-block; text-decoration:none; } 
     .scroll-up-down li a img { border:5px solid #000; height:100px; width:100px; } 

    </style> 
    <!--/STYLES --> 
</head> 

<body> 
    <h1> User Profiles Grid</h1> 
    <ul class="scroll-up-down"> 

     <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. ABC</span></a> 
     <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span> 
     </li> 

     <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Ms. PQR</span></a> 
     <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span> 
     </li> 

     <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. XYZ</span></a> 
     <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span> 
     </li> 


     <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Ms. LMN</span></a> 
     <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span> 
     </li> 

     <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. DEF</span></a> 
     <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span> 
     </li> 

     <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. JKL</span></a> 
     <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span> 
     </li> 


     <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Ms. RST</span></a> 
     <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span> 
     </li> 

     <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. QWE</span></a> 
     <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span> 
     </li> 

     <li><a href="mylinkedin.php"><img src="mysteryman.jpg" alt="mystery-man" title="mystery-man" /><span>Mr. YUI</span></a> 
     <span class="hover-link"><a href="http://www.linkedin.com/in/aratibhandare" class="linkedin-icon">&nbsp;</a></span> 
     </li> 


    </ul> 
</body> 
</html>

來源

2012-10-03 11:25:08 Aratidgr8

jQuery的動畫畫面上用同一個鏈接李麗

回答

相關問題