Question

我有一个用户可以进行选择的表单，然后根据这些选择动态生成图表并显示为图像。

目前我正在通过在jQuery对话框中显示图像来完成此操作。

是否可以将某些内容放在一起（理想情况下使用jQuery），以便在显示一个图像并且用户提交另一个选择时，第一个图像直接变换为第二个图像而不显示中间和不必要的背景视图？

Answer 1

您可以在对话框内将两个图像放在彼此的顶部（将位置设置为绝对并使用z-index），当第二个图像加载时，将alpha从一个动画到另一个动画。这应该有用。

Answer 2

感谢您向我指出jQuery方法fadeIn和fadeOut交叉渐变。我看到jQuery循环插件使用以下代码变形2个图像。但是我发现你的解决方案直接使用jQuery方法，因此在这方面你的解决方案可能更具吸引力。

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="jquery.cycle.all.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
    $('#crossfade').cycle();
});
</script>
<div id="crossfade">
    <img src="1.jpg" />
    <img src="2.jpg" />
</div>
</body>
</html>

在我的图表应用程序的最后，我选择了一个解决方案，在淡入新图像之前显示一条忙碌信息。这主要是因为我使用jpgraph库动态生成图像，我不确定如何在变形解决方案中容纳这些动态创建的图像。

如何变形动态生成的图像

2 个答案: