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：

<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来源更改时没有动画。

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

JQuery滑动代码无法正常工作

1 个答案: