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/