Помощь в работе с jQuery
Вложений: 1
Всем привет. Столкнулся с 1 проблемой и не знаю как её решить. Смысл задачи сделать 3 кнопки, при наведении на которые будет появляться определенная картинка с анимацией дрыгающийся картинки, а другая пропадает. И надо сделать чтобы при быстром наведении не появлялось больше 1 картинки, тобишь сделать чтобы старая картинка сразу пропадала, а не ждала когда закончится функция или сделать кнопки не активными до завершения функции. Картинка должна появляться сверху в центре. Если не сложно, подскажите как можно решить эту проблему. Ниже есть уже готовая работа, кроме мгновенного пропадания картинки.
|
при вызове функции появления картинки: $(".classButton").unbind("событие",....);
После завершения функции — обратно восстанавливай всё как было: $(".classButton").bind("событие", ....); |
Цитата:
|
Цитата:
вышли скрипт на admin@xlam.kz, поколдую :) |
держи скрипт:
$(document).ready(function(){ $("#but1").attr("disabled", true); $("#but2").attr("disabled", false); $("#but3").attr("disabled", false); $("#but1").mouseenter(function(){ var a = $(this).attr("disabled"); if(!a){ $(this).attr("disabled",true); $("#but2").attr("disabled",true); $("#but3").attr("disabled",true); $("#div1 img").attr("src","1.jpg"); $("#div1").stop().show("bounce", { times: 1 }, 1000); setTimeout(function() { $("#but2").attr("disabled",false); $("#but3").attr("disabled",false); }, 1000); } }); $("#but2").mouseenter(function(){ var a = $(this).attr("disabled"); if(!a){ $(this).attr("disabled",true); $("#but1").attr("disabled",true); $("#but3").attr("disabled",true); $("#div1 img").attr("src","2.jpg"); $("#div1").stop().show("bounce", { times: 1 }, 1000); setTimeout(function() { $("#but1").attr("disabled",false); $("#but3").attr("disabled",false); }, 1000); } }); $("#but3").mouseenter(function(){ var a = $(this).attr("disabled"); if(!a){ $(this).attr("disabled",true); $("#but1").attr("disabled",true); $("#but2").attr("disabled",true); $("#div1 img").attr("src","3.jpg"); $("#div1").stop().show("bounce", { times: 1 }, 1000); setTimeout(function() { $("#but1").attr("disabled",false); $("#but2").attr("disabled",false); }, 1000); } }); }); и таблицу: <table align="center"> <tr> <td> <input id="but1" type="button" value="k1" /><br> <input id="but2" type="button" value="k2" /><br> <input id="but3" type="button" value="k3" /><br> </td> <td> <div id="div1" class="conteiner"><img src="1.jpg" height="250px" width="150px"></div> </td> </tr> </table> |
вот рабочий вариант.
оптимизировать не стал, чтоб было понятно, что и когда делается |
Спасибо, работает. Только при быстром перемещении по кнопкам когда останавливаешься на 1 карте, то эта карта начинает опускать вниз и потом пропадает. Как это исправить?
Посмотрел файл который пришел на почту, там все работает нормально, наверное переписал не так. Огромное спасибо за помощь |
Цитата:
|
Как оказалось не совсем то что нужно было((( Надо изменить 2 вещи:
1. Должна блокироваться только та кнопка, которая в данный момент задействована (показана картинка от этой кнопки). 2. При наведении курсора на неактивную кнопку, характеризующую не активную картинку - ничего не происходит (если быстро пробежать мышкой с 1 кнопки до 3 и остаться на ней, то будет заблокирована 2 кнопка, картинка будет 2 кнопки, хотя указатель мышки находится на 3). С блокировкой кнопок все понятно, а вот как сделать 2 пункт, с этим у меня уже проблема и не могу её решить. Помоги пожалуйста. |
1: советую оставить всё как есть, но кнопки через CSS заменить картинками (в активном и неактивном состоянии будет одна картинка), а при :hover — заменять на затемненную.
2: так неактивны остальные только пока происходит анимация. после завершения анимации они возвращаются в активное положение.. если менять картинку сразу после попадания мыши, не дожидаясь конца анимации, прежние проблемы вернутся. картинки будут меняться, не успев встать на место, всё будет дергаться. |
Часовой пояс GMT +3, время: 10:06. |