我在点击事件上翻转图像。第一次单击时,会显示第二张图像(在第一次被翻转后),但反之亦然。
这是我的代码:
$(document).ready(function () {
var margin = $("#image1").width() / 2;
var width = $("#image1").width();
var height = $("#image1").height();
$("#image2").stop().css({ width: '0px', height: '' + height + 'px', marginLeft: '' + margin + 'px', opacity: '0.5' });
$("#reflection2").stop().css({ width: '0px', height: '' + height + 'px', marginLeft: '' + margin + 'px' });
$("#image1").click(function () {
$(this).stop().animate({ width: '0px', height: '' + height + 'px', marginLeft: '' + margin + 'px', opacity: '0.5' }, { duration: 300 });
window.setTimeout(function () {
$("#image2").stop().animate({ width: '' + width + 'px', height: '' + height + 'px', marginLeft: '0px', opacity: '1' }, { duration: 300 });
}, 500);
});
$("#image2").click(function () {
$(this).stop().animate({ width: '0px', height: '' + height + 'px', marginLeft: '' + margin + 'px', opacity: '0.5' }, { duration: 500 });
window.setTimeout(function () {
$("#image1").stop().animate({ width: '' + width + 'px', height: '' + height + 'px', marginLeft: '0px', opacity: '1' }, { duration: 500 });
}, 500);
});
});