0

我是 JQuery 的新手，正在尝试让 div 从右向左滑出，然后从左向右滑回。我正在使用的代码是：

   function addListeners()
   {
     document.getElementById('save_li').addEventListener('click', function () {

            $('#frame_div').animate({width:'toggle'});
            document.getElementById('frame_opened').src = "save.php";
            $('#frame_div').animate({width:'toggle'});
            }, false);  
      document.getElementById('recover_li').addEventListener('click', function () {
            $('#frame_div').hide("slide",{direction:"right"},1000);
            document.getElementById('frame_opened').src="recover.php";
            //$('#frame_div').animate({width:'toggle'});
            $('#frame_div').show("slide",{direction:"left"},1000);
            }, false);
   }
    window.onload=addListeners;

HTML：

<div src="save.php" class="frame_div" style="height: 500px; width: 574px; padding-left: 146px;">
  <iframe id="frame_opened" style="width: 100%;" height="100% overflow-x:hidden; overflow-y:hidden;" scrolling="no">
</div>

Firefox 上的 FireBug 或 WebDeveloper 均未显示错误，但代码不起作用。iframe源更改没有动画。

4

1 回答 1

1

我清理了您的代码，并将其全部设为 jQuery。确保您在页面中包含jquery.js（jquery.min.v1.9.1.js或类似内容）。如果您保留需要 jQuery UI 的行（请参阅代码中的注释），请确保包含 jQuery UI 的 CSS 和 JS 文件。

jQuery：

$(document).ready(function(){
    $('#save_li').click(function () {
        $('#frame_div').animate({width:'toggle'}, 1000);
        $('#frame_opened').attr('src','save.php');
        $('#frame_div').animate({width:'toggle'}, 1000);
    }); 
    $('#recover_li').click(function () {
        $('#frame_div').hide("slide",{direction:"right"}, 1000); // this line requires jQuery UI
        $('#frame_opened').attr('src','recover.php');
        $('#frame_div').show("slide",{direction:"left"}, 1000); // this line requires jQuery UI
    });
});

您缺少一些必需的属性，例如动画的长度。（我将它设置1000为 1 秒。）

如果你想省略 jQuery UI，使用这个：

$(document).ready(function(){
    $('#save_li').click(function () {
        $('#frame_div').hide(1000).show(1000);
        $('#frame_opened').attr('src','save.php');
    }); 
    $('#recover_li').click(function () {
        $('#frame_div').hide(1000).show(1000);
        $('#frame_opened').attr('src','recover.php');
    });
});



HTML：

<div id="frame_div" style="height: 500px; width: 574px; padding-left: 146px;">
  <iframe src="save.php" id="frame_opened" style="width: 100%;" height="100% overflow-x:hidden; overflow-y:hidden;" scrolling="no"></iframe>
</div>

该src属性在iframe元素上。如果可能，请将样式改为 CSS。

演示： http: //jsfiddle.net/vy5AW/5/使用 jsfiddle.net/vy5AW/2/ 中 OP 提供的 HTML/CSS

于 2013-04-21T18:03:50.660 回答