Как заставить этот .html раскрываться медленно, а затем медленно прятаться при наведении мыши

Question

Я пробовал так много разных способов сделать это, но мне не удается заставить это .html выглядеть гладко, используя jQuery ...

Я не могу поместить 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, содержимое еще не загрузится и будет выглядеть дерьмово.