如何使这个.html缓慢显示，然后慢慢地隐藏在鼠标上

Question

我尝试了很多不同的方法，但是我无法使用jQuery让这个.html顺利出现......

我不能将iframe放在HTML中然后隐藏它并使用CSS显示它，因为我有几个iframe将出现在预览窗口中，所以我必须在用户滚动某个部分时调用代码。

    var version11 = $('#version11');
    var previewWindow1 = $("#previewWindow1");

    version11.mouseover(function() {

        previewWindow1.html("<iframe src=\"URL"></iframe>");                            

                                    });

Answer 1

您可以先创建一个隐藏容器，然后在其上调用动画。

<div id="clickme">Click me!</div>
<div id="test" style="display:none">
    Your html dynamic content... 
        Your html dynamic content... 
    Your html dynamic content... 
        Your html dynamic content... 
</div>

$("#clickme").click(function() {    
  $('#test').animate({
    opacity: 'toggle'   
  }, 1500, function() {
  });
});

http://api.jquery.com/animate/

的更多信息

演示：http://jsfiddle.net/b8RNU/

Answer 2

将iframe放入html并使用CSS设置display：none;。然后使用jQuery淡入它。如果你通过jQuery添加它，内容将不会加载，它将看起来废话。