Помощь в работе с jQuery
 

Всем привет. Столкнулся с 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: так неактивны остальные только пока происходит анимация. после завершения анимации они возвращаются в активное положение.. если менять картинку сразу после попадания мыши, не дожидаясь конца анимации, прежние проблемы вернутся. картинки будут меняться, не успев встать на место, всё будет дергаться.

чтоб кнопки становились сразу активными измени в каждом блоке последнюю 1000 на 0.

$("#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);
    }, 0);
    }   
});

Если с 3 кнопки быстро пробежаться курсором до 1, то они все 3 становятся не активными

но через 1 секунду, когда кончается анимация, первые две ведь становятся активными. или в каком-то браузере не становятся???

проверили на IE8 и Opera. работают...

Если поменять 1000 на 0, то когда возвращаешься на 1 кнопку, все кнопки блокируются. Даже если медленно делать. Браузер хром

да, чего-то я ступил..

так чтоб вообще не блокировать незадействованные кнопки:

$("#but3").mouseenter(function(){
var a = $(this).attr("disabled");
if(!a){ 
    $(this).attr("disabled",true);
    $("#div1 img").attr("src","3.jpg");
    $("#div1").stop().show("bounce", { times: 1 }, 1000);
    }   
});

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

сделал почти также, добавив строчку $("#but1, #but2").attr("disabled", false) в каждый блок, но теперь при быстром пробеге по всем кнопкам много раз происходит заедании картинки и она опускается вниз. Получается сделать чтобы работала как раньше (та версия, которая пришла мне на почту) с учетом того, чтобы картинка сразу пропадала и появлялась другая не получится?

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

пока работоспособным я вижу только мой первый вариант (который отправлял по почте).. других решений придумать не могу.

Буду тогда просить чтобы первый вариант приняли. Спасибо за помощь и за уделенное мне время.

А можно как то исправить чтобы не было такого недочета:

Курсор стоит на 3 кнопки, но картинка показывается 2 кнопки и пока не выедешь за границу кнопки и опять не наведешь на неё, картинка не поменается

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

попробуй заменить ".mouseenter" на ".focus", если не поможет, тогда невозможно. это браузеры так обрабатывают события, иначе будет бесконечное выполнение, пока курсор находится на кнопке.

Появилось видео как это все должно выглядеть: Пример
Также сказали что должна быть подключена эта библиотека и работать должно через .animate
Каким образом можно сделать чтобы картинка так менялась в блоке?

попробуй по клику на кнопку через animate() изменять позицию картинки в блоке и добавь эффект bounce http://jqueryui.com/demos/effect/

Как я понял картинки должны прокручиваться вниз или вверх в зависимости от места их нахождения. Это как дата на часах (показана настоящая, сверху прошедшая, внизу будущая). С .animate не смог разобраться как она работает с этими эффектами.

Сделал работу таким способом, все вроде работает правильно.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
.conteiner 
{
border:0px; 
height:250px;
width:150px;
position:absolute;
}
.cnop 
{
position:absolute;
Top:9%;
left:43%;
}
</style>      
<script>
$(document).ready(function() {

$("#img2, #img3").hide(0);
$("#but1").attr("disabled", true)
$("#img3, #img2, #img1").css("position","absolute")


$("#but1").mouseenter(function(){
$("#img2, #img3").stop(true, true)
$("#img2, #img3").hide(0);
$("#but1").attr("disabled", true)
$("#but2, #but3").attr("disabled", false)
$("#img1").show("bounce", { times: 1 }, 1000);
$("#img1").css("position","absolute");
});

$("#but2").mouseenter(function(){
$("#img1, #img3").stop(true, true)
$("#img1, #img3").hide(0);
$("#but2").attr("disabled", true)
$("#but1, #but3").attr("disabled", false)
$("#img2").show("bounce", { times: 1 }, 1000);
$("#img2").css("position","absolute");
});

$("#but3").mouseenter(function(){
$("#img2, #img1").stop(true, true)
$("#img2, #img1").hide(0);
$("#but3").attr("disabled", true)
$("#but2, #but1").attr("disabled", false) 
$("#img3").show("bounce", { times: 1 }, 1000);
$("#img3").css("position","absolute");
});

});
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<div class="cnop">
<input id="but1" type="button" value="Блок №1" /><br>
<input id="but2" type="button" value="Блок №2" /><br>
<input id="but3" type="button" value="Блок №3" /><br>
</div>
</td>
<td>
<div class="conteiner">
<div id="img1"><img src="1.jpg" height="250px" width="150px"></div>
<div id="img2"><img src="2.jpg" height="250px" width="150px"></div>
<div id="img3"><img src="3.jpg" height="250px" width="150px"></div>
</div>
</td>
</tr>
</table>
</body>
</html>

Может кому то пригодится или просто посмотреть.