a1rborn

ахаха, все решилось одним лишь подставлением this Даже смешно становится))) Низкий поклон Вам Оксана, и извините мою глупость)

В очередной раз прошу совета, по возможности. Есть несколько дивов с картинками, задача: Написать универсальный скрипт, для всех дивов который мог бы увеличивать размеры именно той картинки, на которую навел курсор пользователь, а когда курсор убран, уменьшать размеры этой картинки. Пока див1 виден, див2 скрыт и наоборот С анимацией все в порядке, алгоритм такой: $(".div1 img, .div2 img").hover(function(){ $(".div1 img:hover, .div2 img:hover").animate({'width':'80px', 'height':'119px'},500, 'swing'); }, function(){ $(".div1 img:hover, .div2 img:hover").animate({'width':'70px', 'height':'109px'},500,'swing'); }); Т.е. когда наводим на любое изображение в див1, див2 и т.д. анимация применяется только к тому img на котором курсор. Проблема в следующем: Писал под лису, довел все до конца, все работает. Но каково было мое удивление, когда ни в хроме, ни в ие вторая часть ховера не работала (Img увеличивался, но не уменьшался). И еще хуже мне стало когда я открыл оперу: там вообще скрипт не работал, браузер просто не мог понять что такое :hover. Соответственно когда везде :hover я поубирал, все заработало, но, конечно, не так как надо. Проблему решил, в какой то степени, подставив каждому img свой id var qwe = $('#qwe1'); $(".div1 #qwe1").hover(function(){ qwe.animate({'width':'80px', 'height':'119px'},500, 'swing'); }, function(){ qwe.animate({'width':'70px', 'height':'109px'},500,'swing'); } ) и т.д., где #qwe1 это id картинки. Но код получается длинный, ведь для каждой картинки приходится писать эту часть Конечно, такое решение, я думаю не совсем подходит и хочется найти оптимального. В чем, собственно, прошу вас мне и помочь

В какой раз уже отвечаете на мои глупые вопросы) Благодарю)

http://jsfiddle.net/UHuxh/9/ При добавлении .dequeue() если много раз подряд покликать по start - меню в дальнейшем будет тупить и разворачиваться не полностью (или вообще не разворачиваться) Если .dequeue() не добавлять, при многократном кликании анимация будет продолжаться Конечно мало кто будет заниматься такой фигней как кликание по меню много раз подряд, но все же)) Проблема конечно не критическая, просто интересно с чем вообще это может быть связано? Есть у кого идеи? PS. тестил только на мозилле и хроме

Проверяете надеюсь на хроме или на сафари?

Вы хотя бы не удаляли свое сообщение и написали решение, вдруг другим понадобится....

обрезать через фш 3ий img не поможет?

задать размеры img в процентах?

Не профи, но надеюсь мои советы окажется нужными Достаточно быстро пробежался по сайту, времени мало, код не смотрел, вот что пока могу сказать: меню дерганое, бросается в глаза, не лучше ли убрать эти конвульсии и сделать градиентом через css? оч мало информации в каждой теме, я понимаю краткость сестра таланта, но не до такой же степени Примеров так же мало, было бы неплохо реализовать раб. область для читателей

Да все то что нужно и как всегда легче чем казалось бы) Спасибо еще раз)

{position:absolute; top:Xpx; left:Xpx;}

Не знал что этот сервис называется "белкой") По поводу шрифта Вы не можете его сгенерировать в белке, потому что он добавлен в блек лист, сабж собственно вам об этом и говорит: Компания адобе попросила белку добавить их (адобовский) шрифт в черный список. Вы не можете конвертировать его. Этот шрифт собственность компании адобе, хранение, употребление и распространение преследуется по закону Вбейте в гугле название шрифта и клик на первый линк с хабры

http://jsfiddle.net/335wB/ Представим, что в block есть див с картинками(x1 к примеру), при нажатии на btn он уезжает и выезжает с этими же картинками. На странице есть еще несколько ссылок, при клике на одну из них, x1 угасает и появляется новый див x2 с другими картинками. Но при клике на btn, block уезжает, при повторном клике выезжает, но опять с дивом x1(т.е. с начальными картинками) Проблема: как сделать, что бы block выезжал с x2, т.е. с тем дивом кот. был последний в block? т.е. jquery должен запоминать какой див был последним в block и показывать именно его

Возник еще один вопрос, связанный с данным кодом, задам его в отдельной теме

Ну как это вы не знаете есть в нем кириллица или нет?)) Открываем фш, пишем что нибудь на русском и применяем этот шрифт (установленный заранее) PS Объясните что такое белка, я не знаю)

так же...

Благодарю от души, все прояснили)

margin-top?

На мой взгляд обязательно по высоте увеличивать И фон оставлять один, но не такой, как у вас, слишком резкий Согласен с предыдущим оратором полностью css3 всему голова PS Я бы тоже там ничего не купил

по поводу font-face не знаю, не знаю... у меня все съедал, мб в том шрифте, кот. вы устанавливаете нет кириллицы?

мб в том, что border-collapse работает только с таблицами или с эл-тами у кот. display table или inline-table ?

Да, то что нужно! Буду пробовать у себя, благодарю Если есть возможность укажите все ли верно понимаю и описываю скрипт=) $('.btn').on('click', function() { // при клике на бтн вызываем функцию if (!$(this).data('active')) { // если (устанавливаем значение бтн "актив") $(this).data('active', true) // бтн имеет значение "актив" (об этом говорит true) .animate({ // применяем анимейт 'left':0, //налево к 0пкс. 'margin-left': 0 //отступ слева 0пкс. }, 700); //время 700мс $('.block').animate({'left': '-100%'}, 700); //и к блоку применить анимейт налево -100% } else { //иначе $(this).data('active', false) //если бтн не имеет значение актив .animate({ // применяем 'left': '50%', // то то 'margin-left': '-75px' //и то то }, 700); $('.block').animate({'left': 0}, 700); //и т.д. }; }); PS Что означает ! во 2 строке кода?

Возникла проблема с реализацией следующего: есть три дива, вертикально расположенных друг за другом. Есть также img (позиционирован абсолютно), он служит "кнопкой" и находиться между(поверх) 2 и 3 дивом. Хотел сделать так, что бы при нажатии на этот img - див2 уезжал налево и исчезал (типа slideUp, только влево), и одновременно с ним, смещался налево этот самый img на x пикселей, но не исчезал И при повторном нажатии на Img див2 выезжал направо и img так же направо. Перепробовал много способов, вешал click, toggle, animate все всегда по разному получалось. К примеру, вроде бы (как я думал ), должен был помочь /*$(document).ready(function(){ $(".io").toggle( function(){$(".col2").animate({'left':'50'},2000,'swing');}, function(){$(".col2").animate({'right':'50'},2000,'swing');} ); });*/ или $(document).ready(function(){ $(".io").click(function(){ $(".colx").animate({'left':'50'},2000,'swing') }, function(){ $(".colx").animate({'right':'50'},2000,'swing') }); }); и т.д. Но получается не совсем так как надо, по мимо предложенных мной было еще куча кода, но тщетно. Понимаю, что не совсем понимаю (извиняюсь) саму структуру построения Получилось один раз сделать только что бы при нажатии на img див уезжал, но не выезжал обратно. Направьте на путь истинный дамы и господа, буду премного благодарен! PS Не обязательно решать мою проблему, помогли бы пару советов и разъяснение реализации моей идеи =)

Благодарю за ответ)

Решил углубиться в css и начать это с создания кнопок для меню по средствам таблицы стилей. Искал в гугле туториалы и нашел несколько сайтов с генератором css кнопок (линк не буду давать, в поисковике забьете) Сразу возник вопрос, Для человека только начинающего создавать css элементы - пригодиться, или, точнее, надо ли будет пользоваться таким сервисом или лучше на первых порах не стоит? С одной стороны, сделал кнопку какую надо, посмотрел код и вперед в гугл искать что есть что, с другой стороны не лучше ли будет самому все учить и создавать? Просто интересны мнения знающих людей