Question

我想做我网站的iframe预览。像themeforest这样的东西（顶部导航栏+ iframe）。

我有＃header-bar，高度为50px，iframe为页面的其余部分。为此，我有这个充分工作的jquery：

$('#demo').height( $(window).height() - 50 );

我想将close button添加到标题栏，其功能将是：onclick将标题栏的位置从绝对顶部0更改为绝对顶部-50并将该iframe更改为完全100％。

我正在尝试使用此脚本，但它不起作用，我不知道原因。

$('.close-bar').click(function() {
  $('#header-bar').css('top', - 50 );
  $('#demo').height( $(window).height() - 0 );
});

请帮助我，以及我如何用JS（而不是css）来动画它？

由于

Answer 1

可能是语法问题？试试

$('.close-bar').click(function() {
    $('#header-bar').css('top', '-50px' );
    $('#demo').height( $(window).height() - 0 );
});

Answer 2

如果你想隐藏，可以使用jQuery animate或fadeOut，查看jQuery documentation

$('.close-bar').click(function() {
      //$('#header-bar').animate( {}, 1000);
      $('#header-bar').fadeOut('slow' );            
      $('#demo').height( $(window).height() - 0 );
 });

希望这有帮助。

Onclick更改iframe高度和div位置

2 个答案: