JavaScript, изменение изображения с анимацией

Question

JavaScript, изменение изображения с анимацией

0

У меня есть страница, где в центре экрана есть div, а ниже есть несколько ссылок. Каждая ссылка при щелчке должна показывать в div другое изображение. При щелчке ссылки текущее изображение должно перемещаться влево от экрана и исчезать, в то же время новое изображение должно появляться справа с замиранием и помещаться в div. То, что я делал до сих пор, находится в следующем сценарии, который называется по каждой ссылке с

OnClick=("changeImage('name')")



function changeImage(param){
var image = $("#div");
image.animate({"queue": true, opacity: 0.0, right: '650px'}, 1200);
image.attr('src', 'img/'+param+'.png');
}

В настоящий момент изображения меняются перед перемещением влево. Затем он исчезает. Я хотел бы, чтобы первое изображение двигалось, исчезало, а затем второе отображалось справа. Вы можете мне помочь? спасибо

maurice77 23 сен. 2013, в 15:19

Источник

Теги:

javascript

jquery

jquery-animate

1 ответ

Ещё вопросы

Mooseman · Accepted Answer · 2013-09-23T10-09-00.000Z

$("#div").click(function(){
    var image = $(this);
    var param = 'example';
    image.animate({opacity: 0.0, right: '1000px'}, 1200).delay(100).animate({opacity: 1, right: '200px'}, 1200);
    setTimeout(function(){ image.attr('src', 'img/'+param+'.png').css('right','-1000px'); },1200);
});

Сценарий: http://jsfiddle.net/nKpqU/

queue jQuery-эффектов применяется только к этим: эффектам и анимации. Я также изменил настройку onclick, чтобы связать событие click с jQuery .click.

Привет, это нормально, но второе изображение не появляется справа, оно появляется слева. Как сделать так, чтобы оно появилось справа?
@ maurice77 Я обновил свой код. Обратите внимание, что overflow-x: hidden должен применяться к контейнеру изображения, чтобы предотвратить горизонтальную полосу прокрутки. Тем не менее, это закомментировано в скрипке.