1. 首頁
  2. 問答
  3. Jquery CSS .animate li div

Jquery CSS .animate li div

2012-08-01 99 views
0

請幫我用下面的代碼。我可以使用圖像創建圓形菜單並使其變得簡單，但我想使用CSS和Jquery使頁面超快，並從該項目中學習一些東西。我想要做的是更改（動畫）圍繞盤旋菜單項的圓形形狀的顏色。我認爲代碼非常自我解釋，但如果有任何不清楚的地方，請告訴我。Jquery CSS .animate li div

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script src="jquery.color.min.js"></script> 
<script type="text/javascript"> 
     $(document).ready(function() { 
     var itemnumber = ''; 
     $('#menu li').hover(function() { 
      itemnumber = '#item' + $(this).text(); 
      $(itemnumber).animate({color: "#abcdef"}, 1000); 

     }).mouseleave(function() { 
      $(itemnumber).animate({color: "#B1AC8F"}, 1000); 
     }); 
     }); 
</script> 
<style type="text/css"> 
    body { 
     width: 810px; 
     height: 800px; 
     background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%); 
     background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%); 
     background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%); 
     background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%); 
     background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%); 
     background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,255,255)),color-stop(0.34, rgb(206,203,183)),color-stop(0.82, rgb(177,172,143))); 
    } 

    #menu ul { list-style:none; } 
    #logo { width:250px; margin:0 285px; } 
    .circle { width: 150px; height: 150px; background: transparent; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; border:10px; border-style:solid; color:#B8A36E; } 
    .oval { margin: 0.5px 10px; width: 130px; height: 50px; background: #B8A36E; -moz-border-radius: 100px/50px; -webkit-border-radius: 100px/50px; border-radius: 100px/50px; } 
    #itempic {position:relative; margin: -1px -12px; z-index:-1;} 
    #item1 {position:absolute; left: 160px; top:170px; } 
    #item2 {position:absolute; left: 335px; top:170px; } 
    #item3 {position:absolute; left: 510px; top:170px; } 
    #item4 {position:absolute; left: 245px; top:325px; } 
    #item5 {position:absolute; left: 420px; top:325px; } 
    #item6 {position:absolute; left: 160px; top:480px; } 
    #item7 {position:absolute; left: 335px; top:480px; } 
    #item8 {position:absolute; left: 510px; top:480px; } 
    #item9 {position:absolute; left: 245px; top:635px; } 
    #item10 {position:absolute; left: 420px; top:635px; } 
</style> 
</head> 

<body> 
<img id="logo" src="logo.png"> 
<div id="menu"> 
<ul> 
    <li><div class="circle" id="item1"><div class="oval"><img id="itempic" src="Item1.png"></div></div></li> 
    <li><div class="circle" id="item2"><div class="oval"><img id="itempic" src="Item2.png"></div></div></li> 
    <li><div class="circle" id="item3"><div class="oval"><img id="itempic" src="Item3.png"></div></div></li> 
    <li><div class="circle" id="item4"><div class="oval"><img id="itempic" src="Item4.png"></div></div></li> 
    <li><div class="circle" id="item5"><div class="oval"><img id="itempic" src="Item5.png"></div></div></li> 
    <li><div class="circle" id="item6"><div class="oval"><img id="itempic" src="Item1.png"></div></div></li> 
    <li><div class="circle" id="item7"><div class="oval"><img id="itempic" src="Item2.png"></div></div></li> 
    <li><div class="circle" id="item8"><div class="oval"><img id="itempic" src="Item3.png"></div></div></li> 
    <li><div class="circle" id="item9"><div class="oval"><img id="itempic" src="Item4.png"></div></div></li> 
    <li><div class="circle" id="item10"><div class="oval"><img id="itempic" src="Item5.png"></div></div></li> 
</ul> 
</div> 
</body> 
</html>

我發現了這個問題..謝謝你的幫助！

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.color.min.js"></script> 
<script type="text/javascript"> 
     $(document).ready(function() { 
     var itemnumber = ''; 
     var itemoval = ''; 
     $('#menu li').hover(function() { 
      itemnumber = '#item' + ($('#menu li').index(this) + 1); 
      itemoval = itemnumber + '-oval'; 
      $(itemnumber).animate({color: "#F97780"}, 500); 
      $(itemoval).animate({backgroundColor: "#F97780"}, 500); 
     }).mouseleave(function() { 
      $(itemnumber).animate({color: "#B8A36E"}, 500); 
      $(itemoval).animate({backgroundColor: "#B8A36E"}, 500); 
     }); 
     }); 
</script> 
<style type="text/css"> 
    body { 
     width: 810px; 
     height: 800px; 
     background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%); 
     background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%); 
     background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%); 
     background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%); 
     background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%); 
     background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,255,255)),color-stop(0.34, rgb(206,203,183)),color-stop(0.82, rgb(177,172,143))); 
    } 

    #menu ul { list-style:none; } 
    #logo { width:250px; margin:0 285px; } 
    .circle { width: 150px; height: 150px; background: transparent; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; border:10px; border-style:solid; color:#B8A36E; } 
    .oval { z-index:-1; margin: 0.5px 10px; width: 130px; height: 50px; background: #B8A36E; -moz-border-radius: 100px/50px; -webkit-border-radius: 100px/50px; border-radius: 100px/50px; } 
    #itempic {position:relative; margin: -1px -12px; z-index:-1;} 
    #item1 {position:absolute; left: 160px; top:170px; } 
    #item2 {position:absolute; left: 335px; top:170px; } 
    #item3 {position:absolute; left: 510px; top:170px; } 
    #item4 {position:absolute; left: 245px; top:325px; } 
    #item5 {position:absolute; left: 420px; top:325px; } 
    #item6 {position:absolute; left: 160px; top:480px; } 
    #item7 {position:absolute; left: 335px; top:480px; } 
    #item8 {position:absolute; left: 510px; top:480px; } 
    #item9 {position:absolute; left: 245px; top:635px; } 
    #item10 {position:absolute; left: 420px; top:635px; } 
</style> 
</head> 

<body> 
<img id="logo" src="logo.png"> 
<div id="menu"> 
<ul> 
    <li><div class="circle" id="item1"><div class="oval" id="item1-oval"><img id="itempic" src="Item1.png"></div></div></li> 
    <li><div class="circle" id="item2"><div class="oval" id="item2-oval"><img id="itempic" src="Item2.png"></div></div></li> 
    <li><div class="circle" id="item3"><div class="oval" id="item3-oval"><img id="itempic" src="Item3.png"></div></div></li> 
    <li><div class="circle" id="item4"><div class="oval" id="item4-oval"><img id="itempic" src="Item4.png"></div></div></li> 
    <li><div class="circle" id="item5"><div class="oval" id="item5-oval"><img id="itempic" src="Item5.png"></div></div></li> 
    <li><div class="circle" id="item6"><div class="oval" id="item6-oval"><img id="itempic" src="Item1.png"></div></div></li> 
    <li><div class="circle" id="item7"><div class="oval" id="item7-oval"><img id="itempic" src="Item2.png"></div></div></li> 
    <li><div class="circle" id="item8"><div class="oval" id="item8-oval"><img id="itempic" src="Item3.png"></div></div></li> 
    <li><div class="circle" id="item9"><div class="oval" id="item9-oval"><img id="itempic" src="Item4.png"></div></div></li> 
    <li><div class="circle" id="item10"><div class="oval" id="item10-oval"><img id="itempic" src="Item5.png"></div></div></li> 
</ul> 
</div> 
</body> 
</html>

來源

2012-08-01 Asim Siddiqui

回答

1

這給看看：http://jsfiddle.net/ufomammut66/ZsX8e/

我改變了你的懸停事件到MouseEnter事件。如果您將其更改回懸停在jsfiddle中，您會注意到'in'日誌記錄語句會在出路中觸發兩次（查找我留下的console.log語句），這是我們不想要的。

我還將jquery選擇器更改爲您的圈子類。我這樣做是因爲它看起來像是因爲你不能看到李元素（這可能是缺少圖像），你希望它在進入圓元素時觸發。

我不清楚你正在嘗試使用itemnumber，但好像你正在嘗試重建圓圈元素ID來選擇它。我們不需要這樣做，因爲this元素將引用我們正在進入或離開的當前元素。

注：我假設您使用此：http://www.bitstorm.org/jquery/color-animation/作爲您的jquery.color.min.js導入。 jsFiddle有這個導入工作。

希望這會有所幫助。

來源

2012-08-01 21:12:49 ShortRound1911

2

你需要看看jQuery UI Color動畫here。

通過包含此腳本標記，您可以使用Google CDN包含jQuery UI。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery-ui/1.8.21/jquery-ui.min.js"></script>

基本上它歸結爲連接jQuery用戶界面，然後改變你的懸停功能的mouseenter功能。

看看這個working example。

來源

2012-08-01 21:12:09 Undefined

相關問題

 相關問題