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:

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

ошибок не показаны либо из FireBug или WebDeveloper на Firefox, но код не работает. Источник iframe изменяется без анимации.

Answer 1

Я очистил ваш код и сделал его все-jQuery. Убедитесь, что вы включили jquery.js (или jquery.min.v1.9.1.js или аналогичные) на свою страницу. Если вы сохраните строку, которая требует jQuery UI (см. Комментарий в коде), убедитесь, что вы включили CSS и JS-файлы jQuery UI.

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 вместо этого.

Demo: http://jsfiddle.net/vy5AW/5/ с помощью HTML/CSS, поставляемый ОП в jsfiddle.net/vy5AW/2/