Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Помощь в работе с jQuery (https://javascript.ru/forum/jquery/26353-pomoshh-v-rabote-s-jquery.html)

Stalker4uk 05.03.2012 19:56

Помощь в работе с jQuery
 
Вложений: 1
Всем привет. Столкнулся с 1 проблемой и не знаю как её решить. Смысл задачи сделать 3 кнопки, при наведении на которые будет появляться определенная картинка с анимацией дрыгающийся картинки, а другая пропадает. И надо сделать чтобы при быстром наведении не появлялось больше 1 картинки, тобишь сделать чтобы старая картинка сразу пропадала, а не ждала когда закончится функция или сделать кнопки не активными до завершения функции. Картинка должна появляться сверху в центре. Если не сложно, подскажите как можно решить эту проблему. Ниже есть уже готовая работа, кроме мгновенного пропадания картинки.

T-sh 05.03.2012 20:29

при вызове функции появления картинки: $(".classButton").unbind("событие",....);

После завершения функции — обратно восстанавливай всё как было: $(".classButton").bind("событие", ....);

Stalker4uk 05.03.2012 21:56

Цитата:

Сообщение от T-sh (Сообщение 161536)
при вызове функции появления картинки: $(".classButton").unbind("событие",....);

После завершения функции — обратно восстанавливай всё как было: $(".classButton").bind("событие", ....);

Что-то не получается сделать этим способом

T-sh 05.03.2012 21:59

Цитата:

Сообщение от Stalker4uk (Сообщение 161548)
Что-то не получается сделать этим способом

форум архив на скачку отдаёт битый, посмотреть не могу
вышли скрипт на admin@xlam.kz, поколдую :)

T-sh 05.03.2012 22:35

держи скрипт:
$(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>

T-sh 05.03.2012 22:47

вот рабочий вариант.

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

Stalker4uk 05.03.2012 22:51

Спасибо, работает. Только при быстром перемещении по кнопкам когда останавливаешься на 1 карте, то эта карта начинает опускать вниз и потом пропадает. Как это исправить?
Посмотрел файл который пришел на почту, там все работает нормально, наверное переписал не так. Огромное спасибо за помощь

T-sh 05.03.2012 22:53

Цитата:

Сообщение от Stalker4uk (Сообщение 161560)
Спасибо, работает. Только при быстром перемещении по кнопкам когда останавливаешься на 1 карте, то эта карта начинает опускать вниз и потом пропадает. Как это исправить?

я это исправил уже, отредактировал код в комментарии выше. скопируй его заново. и на почту выслал тебе уже готовый вариант) без этого глюка

Stalker4uk 06.03.2012 17:10

Как оказалось не совсем то что нужно было((( Надо изменить 2 вещи:
1. Должна блокироваться только та кнопка, которая в данный момент задействована (показана картинка от этой кнопки).
2. При наведении курсора на неактивную кнопку, характеризующую не активную картинку - ничего не происходит (если быстро пробежать мышкой с 1 кнопки до 3 и остаться на ней, то будет заблокирована 2 кнопка, картинка будет 2 кнопки, хотя указатель мышки находится на 3).

С блокировкой кнопок все понятно, а вот как сделать 2 пункт, с этим у меня уже проблема и не могу её решить. Помоги пожалуйста.

T-sh 06.03.2012 18:24

1: советую оставить всё как есть, но кнопки через CSS заменить картинками (в активном и неактивном состоянии будет одна картинка), а при :hover — заменять на затемненную.

2: так неактивны остальные только пока происходит анимация. после завершения анимации они возвращаются в активное положение.. если менять картинку сразу после попадания мыши, не дожидаясь конца анимации, прежние проблемы вернутся. картинки будут меняться, не успев встать на место, всё будет дергаться.


Часовой пояс GMT +3, время: 10:06.