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 07.03.2012 14:41

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

Undefitied 07.03.2012 20:49

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

Stalker4uk 08.03.2012 15:04

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

Stalker4uk 09.03.2012 12:58

Сделал работу таким способом, все вроде работает правильно.
<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>


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


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