Javascript JQuery滑动代码不工作

我是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:

---

Firefox上的FireBug或WebDeveloper均未显示任何错误，但代码不起作用。

iframe

源代码在没有动画的情况下更改。

我清理了您的代码，并将其全部制作成jQuery。确保在页面中包含

jquery.js

（或

jquery.min.v1.9.1.js

或类似内容）。如果保留了需要jqueryui的行（请参见代码中的注释），请确保包含jqueryui的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。

---

演示：在jsfiddle.net/vy5AW/2/

中使用OP提供的HTML/CSS，为什么要将jQuery和vanilla JS结合起来？@Mooseman正如我所说，我是jQuery新手，所以如果我将它与vanilla JS结合起来，我不知道：（.你能帮个忙吗？没有jQueryUI还有别的方法吗？正如我所说的，我对JQuery还不熟悉，所以除了现在介绍jQueryUI之外，将来还会有点困难learning@BujancaMihai我改变了我的答案。好的，我会试试，但是这样它会消失还是滑入？如果滑入，它会滑入吗根据需要？仍然只是出现，看起来不像是滑动，我不明白为什么。没有显示错误，我添加了JQuery UI。你能用剩下的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>