JQuery滑动代码不起作用

Question

我是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：无论从萤火虫或WebDeveloper显示在Firefox

<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> 

没有错误，但该代码不起作用。 iframe源更改不带动画。

Answer 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用户界面，使用此：

$(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/使用由OP在jsfiddle.net/vy5AW/2/