Оптимизацией jquery. animate и z-index(возращение значения)
Здравствуйте,
в javascript и jquery слабо ориентируюсь. написал маленький код для фото галереи <ul > <li><a href="" class="run1">foto 1</a></li> <li><a href="" class="run2">foto 2</a></li> <li><a href="" class="run3">foto 3</a></li> </ul> <div > <img src="images/2.png" id="img3" style="position:relative; " /> <img src="images/3.png" id="img2" style="position:relative; margin-top:-390px; "/> <img src="images/1.png" id="img1" style="position:relative; margin-top:-690px;z-index:1; " /> </div> jquery <style> .z {z-index:1;} </style> <script type="text/javascript" src="javascript/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var a = 0; var b = 1; var c = 2; $(".run1").mouseover(function(){ $("#img1").animate({ left: "500", opacity: "0.3"}, "slow", function() {$(this).css('z-index', a);} ) .animate({left: "0", opacity: "1"}, "slow") return false; }); $(".run2").mouseover(function(){ $("#img2").animate({ left: "500", opacity: "0.3"}, "slow", function() {$(this).css('z-index', b);} ) .animate({left: "0", opacity: "1"}, "slow") return false; }); $(".run3").mouseover(function(){ $("#img3").animate({ left: "500", opacity: "0.3"}, "slow", function() {$(this).css('z-index', c);} ) .animate({left: "-50", opacity: "1"}, "slow") return false; }); }); </script> Идея была в том что все фото лежат под одной фотографией. при наведении на ссылку определенное фото с эффектов выезжала и становилась над всеми. Но когда я навожу обратно на ссылки то переход не происходит(((( Помогите начинающему |
Вариант
<!DOCTYPE html> <html> <head> <title></title> <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"> $(document).ready(function(){ $("a").mouseover(function(){ $("img").css('z-index', -1) $("img."+$(this).attr("class")+"").animate({ left: "500", opacity: "0.3"}, "slow", function() {$(this).css('z-index', 1);} ) .animate({left: "0", opacity: "1"}, "slow") return false; }); }); </script> </head> <body> <ul > <li><a href="" class="run3">foto 1</a></li> <li><a href="" class="run2">foto 2</a></li> <li><a href="" class="run1">foto 3</a></li> </ul> <div style="position: absolute ;left: 100px; top: 10px;"> <img class="run1" src="http://img.files.7ja.ru/pics-big/99.jpg" id="img3" style="position: absolute ; " /> <img class="run2" src="http://www.dostavka-buketov.ru/imag/df156.jpg" id="img2" style="position:absolute;"/> <img class="run3" src="http://www.buket.co.ua/planet/srez_cvety/____182.jpg" id="img1" style="position:absolute; " /> </div> </body> </html> Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Часовой пояс GMT +3, время: 08:55. |