Столкнулся с такой проблемкой: Есть вот это: Code: ... <table ...(styles, attributes)... > <tr> <td> <a href="#"><img src='./image1.png' /><div style='z-index: 20; position: absolute;'>TEXT</div></a> <a href="#"><img src='./image2.png' /><div style='z-index: 20; position: absolute;'>TEXT1</div></a> <a href="#"><img src='./image3.png' /><div style='z-index: 20; position: absolute;'>TEXT2</div></a> </table> ... Каждый div имеет класс content. Все очень просто, текст поверх картинки. Выглядит все просто великолепно) Но есть одна проблема. Мне нужно с помощью jQuery отображать содержимое тэгов <a> по очереди. . Если делать each и в нем по очереди делать show() то javascript отображает это все сразу. Если убрать тэги a. Получится то что мне нужно. Запрос jQuery будет выглядеть так: Code: $(document).ready(function(){ $("td img:eq(0)").show("slow", function () { $(this).next().show("slow", arguments.callee); }).end().next('.content:ex(0)').show('slow', function () { $(this).next('.content:ex(0)').show('slow', arguments.callee)}); }); Но тэги <a> мне очень нужны. Как можно с ними реализовать такое отображение? Спасибо.
Code: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>One by one</title> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script> $(window).load(function() { var items = $('.landscapes li'), n = 0, l = items.length; /**/ items.hide(); /**/ (function next() { if(n < l) { items.eq(n++).show('slow', next); } })(); }); </script> <style> html, body { margin: 0; background: #000; overflow: hidden; } .landscapes { margin: 1em; padding: 0; list-style-type: none; } .landscapes li { /** display: none; /**/ position: relative; margin: 5px 0; width: 220px; height: 170px; border: #333 solid 1px; } .landscapes .preview { position: relative; top: 10px; left: 10px; display: block; text-decoration: none; } .landscapes .preview img { border: none; } .landscapes .preview .title { position: absolute; top: 5px; left: 5px; color: #000; font: smaller sans-serif; } </style> </head> <body> <ul class="landscapes"> <li> <a href="#" class="preview"> <img src="http://www.picamatic.com/show/2009/05/01/12/00/3476906_200x150.jpg"> <div class="title">Lorem</div> </a> <li> <a href="#" class="preview"> <img src="http://www.picamatic.com/show/2009/05/01/12/00/3476910_200x150.jpg"> <div class="title">Imsum</div> </a> <li> <a href="#" class="preview"> <img src="http://www.picamatic.com/show/2009/05/01/12/00/3476908_200x150.jpg"> <div class="title">Dolor</div> </a> </ul> </body> </html>
Спасибо большое, работает просто прекрасно. Хоть, я еще и не понял как, но выглядит просто не передать эмоций ^_^)))