jQuery – это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение – лучше всего начинать с наглядных примеров, и они далее…
Как же все-таки работает jQuery?
Ну для начала Вам понадобится сам фреймворк, его вы сможете скачать с домашней страницы проекта, затем проинициализировать:
<head> <script type="text/javascript" src="jquery.js"></script> </head>
А основные моменты Вам поможет понять следующая диаграмма:
Как получить элемент с помощью jQuery?
Для того чтобы понимать как работает селектор Вам все-же необходимы базовые знания CSS, т.к. именно от принципов CSS отталкивается селектор jQuery:
- $(“#header”) – получение элемента с id=”header”
- $(“h3″) – получить все <h3> элементы
- $(“div#content .photo”) – получить все элементы с классом =”photo” которые находятся в элементе div с id=”content”
- $(“ul li”) – получить все <li> элементы из списка <ul>
- $(“ul li:first”) – получить только первый элемент <li> из списка <ul>
Выдвижная панель
Начнем с простенького примера – слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке (см. пример)
Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (между “active” и “btn-slide”), а панелька с id=”panel” будет выдвигаться/прятаться. (класс “active” изменяет позицию фонового изображения, см. CSS файл во вложении).
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
});
});
Магические исчезновения
Этот пример покажет как можно красиво и легко убирать растворять элементы (см. пример):
Когда мы кликаем по картинке <img class=”delete”>, будет найден родительский элемент <div class=”pane”>, и его прозрачность будет медленно изменяться от opacity= 1.0 до opacity=hide:
$(document).ready(function(){
$(".pane .delete").click(function(){
$(this).parents(".pane").animate({ opacity: "hide" }, "slow");
});
});
Связанная анимация
Теперь пример посложнее, но он поможет Вам лучше понять jQuery. Всего несколько строк кода заставят квадрат двигаться, изменять размер и прозрачность. (см. пример):
Line 0: когда прогрузилась страница (DOM готов к манипуляциям)
Line 1: привязываемся к событию click для элемента <a class=”run”>
Line 2: манипулируем элементом <div id=”box”> – уменьшаем его прозрачность до 0.1, наращиваем позицию left еще на 400px, со скоростью 1200 (milliseconds)
Line 3: затем медленно изменяем следующие параметры: opacity=0.4, top=160px, height=20, width=20; скорость анимации указывается вторым параметром : “slow”, “normal”, “fast” или в миллисекундах
Line 4: затем opacity=1, left=0, height=100, width=100, скорость – “slow”
Line 5: затем top=0, скорость – “fast”
Line 6: затем slideUp (с дефолтной скоростью анимации – “normal”)
Line 7: затем slideDown, скорость – “slow”
Line 8: возвращаем false для того чтобы браузер не перешел по ссылке
$(document).ready(function(){
$(".run").click(function(){
$("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
.animate({top: "0"}, "fast")
.slideUp()
.slideDown("slow")
return false;
});
});
Гармошка #1
Пример реализации “гармошки”. (см. пример)
Теперь приступим к разбору полетов:
Первой строчкой мы добавляем класс “active” первому элементу <h3> внутри <div class=”accordion”> (класс”active” отвечает за позиционирования фонового рисунка – иконки со стрелочкой). Во второй строчке мы прячем все не первые <p> элементы внутри <div class=”accordion”>.
Когда происходит клик по заголовку <h3>, для следующего в нём элемента <p> будет применен эффект slideToggle, затем для всех остальных элементов <p> будет применен эффект slideUp. Следующие действие изменяет класс заголовка на “active”, затем ищем все остальные заголовки <h3> и убираем у них класс “active”
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
Гармошка #2
Этот пример схож с предыдущим, лишь отличается тем, что мы указываем открытую по умолчанию панельку. (см. пример)
В CSS у нас указано для всех элементов <p> display:none. Теперь нам необходимо открыть третью панель. Для этого мы можем написать следующее $(“.accordion2 p”).eq(2).show(), где eq обозначает равенство. Помните, что индексирование начинается с нуля:
$(document).ready(function(){
$(".accordion2 h3").eq(2).addClass("active");
$(".accordion2 p").eq(2).show();
$(".accordion2 h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
Анимация для события hover #1
Данный пример поможет создать Вам очень красивую анимацию для события hover (надеюсь, Вы знаете что это?), (см. пример):
Когда Вы наводите мышкой на элемент меню (mouseover), происходит поиск следующего элемента <em>, и анимируется его прозрачность и расположение:
$(document).ready(function(){
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});
Анимация для события hover #2
Данный пример чуть-чуть посложней предыдущего примера: для формирования подсказки используется атрибут linktitle (см. пример)
Первым делом добавим тэг <em> в каждый элемент <a>. Когда произойдет событие mouseover, мы возьмем текст из атрибута “thetitle” и сохраним его в переменной “hoverText”, затем этот текст будет вставлен в тэг <em>:
$(document).ready(function(){
$(".menu2 a").append("<em></em>");
$(".menu2 a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});
Кликабельные блоки
Этот пример демонстрирует как сделать кликабельным блок с текстом, а не только ссылку (см. пример):
Создадим список <ul> с классом class=”pane-list” и мы хотим сделать элементы <li> кликабельными. Для начала привяжемся к событию click для элемента “.pane-list li”; когда пользователь будет кликать по элементу списка, наша функция произведет поиск тэга <a> и сделает редирект на страницу указанную в атрибуте href.
$(document).ready(function(){
$(".pane-list li").click(function(){
window.location=$(this).find("a").attr("href"); return false;
});
});
Складывающиеся панельки
Ну а теперь чуть-чуть скомбинируем предыдущие примеры и создадим ряд складывающихся панелек (наподобие как в Gmail организован inbox). (см. пример)
- скрываем все элементы <div class=”message_body”> после первого.
- скрываем все элементы <li> после пятого
- клик по <p class=”message_head”> – вызывает метод slideToggle для следующего элемента <div class=”message_body”>
- клик по <a class=”collpase_all_message”> – вызывает метод slideUp для всех <div class=”message_body”>
- клик по <a class=”show_all_message”> – скрывает элемент, и отображает <a class=”show_recent_only”>, так же вызывается метод slideDown для всех <li> послепятого
- клик по <a class=”show_recent_only”> – скрывает элемент, и отображает <a class=”show_all_message”>, так же вызывается метод slideUp для всех <li> после пятого
$(document).ready(function(){
//hide message_body after the first one
$(".message_list .message_body:gt(0)").hide();
//hide message li after the 5th
$(".message_list li:gt(4)").hide();
//toggle message_body
$(".message_head").click(function(){
$(this).next(".message_body").slideToggle(500)
return false;
});
//collapse all messages
$(".collpase_all_message").click(function(){
$(".message_body").slideUp(500)
return false;
});
//show all messages
$(".show_all_message").click(function(){
$(this).hide()
$(".show_recent_only").show()
$(".message_list li:gt(4)").slideDown()
return false;
});
//show recent messages only
$(".show_recent_only").click(function(){
$(this).hide()
$(".show_all_message").show()
$(".message_list li:gt(4)").slideUp()
return false;
});
});
Имитация Backend’a Wordpress’a
Я думаю многие из читателей сталкивались с админской частью wordpress’a, точнее с редактирование комментариев. Попробуем сделать что-то подобное. Для анимации фонового цвета нам понадобиться соответствующий плагин для jQuery. (см. пример)
- добавим класс “alt” к каждому чётному элементу <div class=”pane”> (данный класс изменяет цвет фона элемента)
- клик по <a class=”btn-delete”> инициирует появление сообщения (alert), так же происходит анимация фонового цвета и прозрачности (backgroundColor и opacity) для <div class=”pane”>
- клик по <a class=”btn-unapprove”> – вызывает анимацию фона у <div class=”pane”> (цвет изменяется на желтый и обратно) и добавляет класс “spam”
- клик по <a class=”btn-approve”> – вызывает анимацию фона у <div class=”pane”> (цвет изменяется на зеленый и обратно) и удаляет класс “spam”
- клик по <a class=”btn-spam”> – вызывает анимацию фона у <div class=”pane”> (цвет изменяется на красный), и изменяет параметр “opacity” на “hide”
//don't forget to include the Color Animations plugin
$(document).ready(function(){
$(".pane:even").addClass("alt");
$(".pane .btn-delete").click(function(){
alert("This comment will be deleted!");
$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")
return false;
});
$(".pane .btn-unapprove").click(function(){
$(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast")
.animate({ backgroundColor: "#ffffff" }, "slow")
.addClass("spam")
return false;
});
$(".pane .btn-approve").click(function(){
$(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast")
.animate({ backgroundColor: "#ffffff" }, "slow")
.removeClass("spam")
return false;
});
$(".pane .btn-spam").click(function(){
$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")
return false;
});
});
Галерея изображений
Простейший пример реализации галереи, без перезагрузки страницы. (см. пример)
Для начала добавим тэг <em> в заголовки <h2>
По клику на изображения в <p class=thumbs> выполняем следующие действия:
- сохраняем значение атрибута “href” в переменной “largePath”
- сохраняем значение атрибута “title” в переменной “largeAlt”
- заменяем в элементе <img id=”largeImg”> значение атрибута “scr” и “alt” значениями из переменных “largePath” и “largeAlt”
- так же присваиваем элементу “h2 em” значение из “largeAlt”
$(document).ready(function(){
$("h2").append('<em></em>')
$(".thumbs a").click(function(){
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$("#largeImg").attr({ src: largePath, alt: largeAlt });
$("h2 em").html(" (" + largeAlt + ")"); return false;
});
});
Стилизируем ссылки
Большинство нормальных браузеров легко понимают когда мы хотим добиться от них стилизации ссылок для различного типа файлов, для это цели можно использовать следующее CSS правило: a[href $='.pdf'] { … }. Но как обычно IE6 отличается умом и сообразительностью, по этой причине будем ставить ему костыли используя jQuery. (см. пример)
Для начала добавим класс для каждой ссылки, в соответствии с типом файла.
Затем выберем все элементы <a> которые не содержат ссылки на “http://www.webdesignerwall.com” и не начинающиеся на “#” в “href”, затем добавим им класс “external” и устанавливаем target= “_blank”.
$(document).ready(function(){
$("a[href$=pdf]").addClass("pdf");
$("a[href$=zip]").addClass("zip");
$("a[href$=psd]").addClass("psd");
$("a:not([href*=http://www.webdesignerwall.com])").not("[href^=#]")
.addClass("external")
.attr({ target: "_blank" });
});
Так же Вы можете посмотреть все примеры или скачать jQuery tutorial for beginners.
Вольный перевод: http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/
Так же много полезных ссылок по jQuery найдете на следующей странице: http://blog.termit.name/jquery/
Может кому пригодиться еще библиотека для PHP: http://anton.shevchuk.name/php/php-library-for-jquery/
Цикл статей
This entry was posted
on Monday, March 3rd, 2008 at 17:32 and is filed under HTML and CSS, JavaScript.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
В сорцах HTML’a ( http://anton.shevchuk.name/wp-content/uploads/2008/03/jquery-tutorials.zip )
Я так и не врублюсь, каким образом в jQuery передать аргумент в функцию? Другими словами, как с помощью jQuery осуществить следующие:
funtction alert(a) { alert (a); }<a href="#" onclick="alert('message');">test message</a>@Andrew:
Вас не смущает, название вашей функции?
Спасибо, очень помогло.
Появился вопрос о http://anton.shevchuk.name/wp-demo/jquery-tutorials/animated-hover2.html
А насколько сильно будет загружать систему если я укажу обработку этой функции полностью на весь сайт?
@Renat:
Если честно – не тестировал подобный вариант – но думаю не сильно, т.к. есть более тяжелые вещи – к примеру сервис от http://www.snap.com
Спасибо, очень полезно.
Очень полезно и интересно, спасибо!
Но вот проблема в галерее – в IE (в данный момент пробовал на 7-ке) ИНОГДА при нажатии на миниатюру большая картинка открывается не в предназначенном ей месте на странице а в текущем окне (как будто я просто нажал на ссылку на картинку, без скрипта). Не подскажите, как победить??
[...] http://anton.shevchuk.name/javascript/jquery-for-beginners/ [...]
[...] jQuery для начинающих [...]
Здравствуйте. Статья очень понравилась…
Но сталкнулся с непонятной вещью…
$(document).ready(function(){ $(".delete").click(function(){ var IdDelete = $(this).text(); //тут мы получаем цифру $("'.pane'+IdDelete").css({backgroundColor: "#fff"}); //не находит //alert('.pane'+IdDelete); //а тут все ок }); });Подскажите пожалуйста.
@Михаил:
Кажется одни кавычки лишние…
$('.pane'+IdDelete).css({backgroundColor: "#fff"});Сижу вникаю в этот кладезь знаний (автору просто огроменное спасибо за перевод)
Возникло недопонимание в самом начале. =)Может немного не по теме, но большая просьба помочь. Я пытаюсь вынести код из первого примера (Выдвижная панель) следующим образом
У меня не срабатывает скрипт в этом случае. Ничего найти не могу почитать (не знаю за что зацепиться) Впрочем, у меня даже не работает подобная конструкция, если выносить её в тот же файл test.js
function test () {alert('TEST');}; window.onload=test;доброго времени суток! а подскажите, пожалуйста, как в галерее картинок сделать так, чтобы при нажатии на превьюшку она отсылала к картинке с id=”largeImg” ? заранее спасибо!
пожалуй, неверно выразился. в общем как привязать якорь ко всем превью, который отсылал бы к (когда много картинок очень неудобно возить постоянно туда сюда скроллбаром)
Большое тебе спасибо! Очень наглядно и понятно!
сори за офф
Очень понравилась галерея из примера
кто-то мог бы прикрутить её к Dle?
@Serega:
С DLE я не работал, но возможно кто из читателей моего блога тебе что-нить подскажут…
[...] так же ссылку на Википедию, официальный мануал (англ) и статьи, которые мне помогли в [...]
Спасибо большое за статью!
Ну что-ж, вот только сегодня познакомился с JQUERY, просто в шоке насколько этот Api упрощает создание JavaScript скриптов.
Спасибо!
[...] оригинал тут из свалкО: JavaScript, jQuery, [...]
[...] jQuery для начинающих [...]
наткнулся на баг в cвязке IE6+jquery
var g_bgcolor=document.bgColor.replace(/#/, '') //"e0e5b8" alert(g_bgcolor) //alert "e0e5b8" g_bgcolor = $('body').attr('bgColor').replace(/#/, '') alert(g_bgcolor) //alert ""За статью спасибо. Но столкнулся с проблемой(может не поэтой статье):
делаю загрузку страницы в другую
<script type="text/javascript"> $(document).ready(function(){ $("#example-1").load('меняющийся_через_переменную_урл_страницы'); x==$("#example-1").html(); $("#example-1").show(); }); </script>Так вот, если в пользоваться Оперой и скрипт не находит страницы по урлу, что он заново подгужает всю страницу в слой #example-1. Как победить – помогите….
Привет, а как сделать выдвижную панель, только вертикальную? Подскажете?
@Дима:
Не знаю, что и предложить – не сталкиваляс с таким багом, кстати – все последующие действия советую запихнуть в callback функцию:
<script type="text/javascript"> $(document).ready(function(){ $("#example-1").load('меняющийся_через_переменную_урл_страницы', {} function(){ x=$(this).html(); $(this).show(); }); }); </script>@Андрей:
Пример выдвижной вертикальной панели есть во второй части статьи: http://anton.shevchuk.name/javascript/jquery-for-beginners-2/
Отличный перевод и пояснения. Оригинал смотрела, но не поняла многого. Вопрос по применению в WordPress. Я хочу сделать галерею фотографий, как здесь показана, на отдельной странице (статичной). Куда надо вставлять код скрипта? При написании страницы чтобы вставить картинку я загружаю изображение.Могу загрузить на одну страницу несколько. Через просмотр исходного кода странички галереи я вижу, как выглядит код. Но никак не пойму, в какой именно файл на WP все это прописывать. Я не имею ввиду CSS,там понятно.
Вопрос по примеру Гармошка #1
Как поместить в еще один элемент, чекбокс, при выборе которого, панель бы не разъезжалась? Задача в том, чтобы сформировать список соглашений, которые можно как просмотреть, так и отметить чекбокс “Agree” не просматривая, при этом чекбокс должен быть в той же строке, что и заголовок.
Спасибо
@Ольга:
Для начала сделать небольшие изменения в HTML:
И подправить JavaScript:
$(".accordion h3 span").click(function(){ $(this).parent().next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).parent().toggleClass("active"); $(this).parent().siblings("h3").removeClass("active"); });@Светлана:
Вам необходимо подключить к Вашей текущей теме внешний JavaScript и в нем уже творить что-либо используя конструкцию $(document).ready(function(){…})
Собственно таким образом в моей текущей теме подключен theme.js
Замечу, что без…
В IE не работают некоторые стили .accordion h3:hover например..
без..
Здравствуйте.
Я подгружаю файл с помощью jquery.
МОжно ли передать информацию в скрипт?
Я сделал, чтобы по клилку по ссылке, подгружалась страница.
А не подскажите, как сделать, чтобы по клику по определённой ссылке в скрипт передавался определённый параметр и загружался определённый файл?
з.ы. Параматры и файл будут передаватсья от ссылки
Пробовал делать так, но не получилось:
на ссылку ставим типа
а в коде пишем
function func(param) { ... jQuery('#example-1').load('file.php?id=param'); ... }Заранее огромное спасибо!
Если я Вас правильно понял – то посмотрите пример:
http://anton.shevchuk.name/wp-demo/jquery-tutorials-3/json.html
Здравствуйте! Сперва огромное спасибо за информацию и перевод! У меня есть вопрос, по поводу Jquery & Wordpress. Я вижу, вы выносили все примеры в обычные html-файлы, значит, может быть, тоже столкнулись с этой проблемой..
Я тоже пользую WP 2.7 и когда что-то встраиваю в footer или header (нормальные php-файлы) все работает. Но когда я создаю, например, в CSS класс, хочу его вставить в статью через WP Editor, а потом с помощью Jquery каким-то образом на него воздействовать, не получается ничего.
Пример:
Код 1:
и в footer
Код 2:
jQuery(document).ready(function(){ jQuery("div[class*='sthide']").hide('slow'); jQuery("a.nextopen").click(function(){ jQuery(this).next().slideToggle('slow'); }); }); </script>так вот, когда код 1 встроен куда угодно, в sidebar, например, он работает. Но только не в статью или страницу через Editor.. Может быть я где-то не прав, может есть решение?
PS. WYSIWYG отключен, пользуюсь HTML Editor.
Спасибо огромное заранее, было бы здорово если бы вы смогли помочь!
А, да, забыл, интересно то ещё, что первая часть Кода 2 работает даже в тексте статьи! То есть hide работает. Не работает в статье только slideToggle.
@Малыкин:
Возможно у Вас включена опция “WordPress should correct invalidly nested XHTML automatically”, который изменяет Ваш HTML, собственно редактор может и без этой опции вносить изменения – посмотрите код страницы…
Не, я забыл написать, все выключено.. Код страницы как-бы вроде тоже нормальный, без экстремальных изменений.
А у Вас получается вставить мой код в статью или страницу в WP? Не могли бы проверить? Спасибо!
[...] jQuery для начинающих – 73 062 [...]
Подскажите пожалуйста как возможно сделать чтобы при загрузке страницы в body плавно исчезал background.
Прежде всего хочу поблагодарить за столь подробную и интересную статью. Гармошку уже опробовал в действии – приятный эффект.
А теперь хочу обратиться за помощью.
Имеется некое мини-меню в виде списка и несколько блоков:
Задача: по клике на пункт меню отображать соответствующий ему блок, при этом остальный блоки должны быть скрыты. Пункты меню должны в свою очередь менять свое активное\неактивное состояние.
Для реализации дополнил код:
Т.е. по задумке по клику на пункт меню отображается блок с соответствующим id (остальные блоки скрываются), а этому пункту меню присваивается класс active.
Собственно, на этом этапе и застрял :( Если с гармошкой разобрался без проблем, то тут никак не пойму, какой должен быть скрипт. Хотя по сути, вроде бы очень похоже на гармошку…
@traveller:
Не совсем разобрался в задумке, но есть подозрения что Вам поможет следующий материал: http://docs.jquery.com/UI/Tabs
Если же Вы продемонстрируете JS – то возможно укажу на ошибки…
Большое спасибо, Антон!
Приведенная ссылка – именно то, что мне и нужно реализовать. Надо было сразу упомянуть про закладки :)
В общем, дальше я наверное самостоятельно разберусь. Еще раз спасибо за помощь!
Добрый день, Антон!
вопрос по слайдшоу.
как можно скачать яваскрипты что-бы сделать такую же шапку как на этом сайте (если можно поподробнее)
@Temish
Не совсем понял – Вас интересует слайдшоу или меню как на блоге?
Если второе – то читаем http://anton.shevchuk.name/html-and-css/web20-css-menu/
[...] данный пример присутствует в первой части, так что особо углубляться в реализацию не буду, [...]
меня интересует именно слайд шоу
Связанная анимация…
а если у меня больше чем один элемент? ( я хочу открытие больших изображений анимировать )
К своей страничке index подкрепил .js с кодом, приведенным на этой, Вашей, страничке. Создал DIV, в него гружу другие странички методом jQuery (как на “jQuery для начинающих. Часть 3. AJAX”), на которых находятся изображения малых размеров, которые я и хочу раскрывать в большие, используя анимацию. Думал как-то параметр передавать в через функцию $(“.run”).click(function(ЗДЕСЬ ПАРАМЕТР){…
но как его переправить из тэга IMG?
P.S. Неплохо бы Ваши ответы на комменты на этой страничке сгруппировать и добавить в конец страницы перед комментариями, иначе очень много приходиться прочесть (комментов уже много набралось) в поисках возможного ответа.
скорее надо что-то вроде этого:
…$(“#content_div html img”).click(function(){
$(“#content_div img this”).animate…
…
@Temish:
Таки я Вас недопонял…
@Sergio:
Вы меня запутали, возможно Вам необходимо что-то типа:
$("#content_div img").click(function(){ $(this).animate({...}); });Поскольку Вы подгружаете динамически страницу с картинками – то используя jQuery 1.3+ следует писать следующее:
$("#content_div img").live("click", function(){ $(this).animate({...}); });Если таки я Вас неправильно понял – то будет лучше если Вы выложите примеры в и-нете – дабы я смог подправить…
Еще раз здраствуйте, Антон.
Вместо UI/Tabs нашел более легкое и простое решение для вкладок: http://www.sunsean.com/idTabs/ – все понятно и замечательно работает.
Однако с одним примером возникли проблемы :( Там в разделе “Advanced” есть довольно симпатичный пример “Animation”. Вот только с jQuery 1.3 он не работает (автор использует jQuery-1.2.3). Хотелось бы разобраться и заставить работать под последней версией. Не могли Вы подправить скрипт или указать, в каком направлении копать.
To Антон>,
Дело в том, что вариант “#content_div img” не срабатывает, т.к. элементы img находятся не на самом index (а именно к ней я подключаю jQuery.js и animate.js), а внутри подгружаемых в #content_div html страничек. На всех других, подгружаемых, страничках я ничего не подключаю, чтобы не множить один и тот же код на все странички, а постараться сделать более изящно, подгрузив лишь к главной – к index). Т.е. сейчас мне надо научиться обращаться к элементам (в данном случае к img) других страниц, подгружаемых в один из DIV основной страницы.
Не совсем понял Вашу фразу “то используя jQuery 1.3+ следует писать следующее” – следует ли из этой фразы, что использование версии 1.3 – это обязательное условие в данном случае? У меня jQuery 1.2.3, и не хотелось бы на более позднюю (“громоздкее”) версию переходить только из-за возможности подключать файл .js лишь однажды при загрукзе index.html