.toggle JQuery вопроса, при переключении библиотеки версии JQuery

Question

Это код работает нормально, когда я использую: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

$(document).ready(function(){ 
$('.mailing-form').toggle(
    function(){ 
     $('#mailing-list-box').animate({ 
      right: "0", 
     }, 500); 
    }, 
    function(){ 
     $('#mailing-list-box').animate({ 
      right: "-256" 
     }, 500);  
    }); 
}); 

Но когда я решил переключить версию моего JQuery с: <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> toggle перестает работать.

Затем я попытался обернуть toggle внутри события click, mailing-list-box div продолжает перемещаться взад и вперед несколько раз.

('.menu-btn').click(function(e) { 
    $('.menu-btn').toggle(
function(){ 
    $('.timeline-box2').animate({ 
    left: "0", 
    }, 500); 
}, 
function(){ 
$('.timeline-box2').animate({ 
left: "-300" 
}, 500);  
}); 
}); 

Answer 1

Вы можете достичь того же поведение без старого .toggle() так:

$(document).ready(function(){ 
    var box = $('.timeline-box2'); 
    $('.menu-btn').on('click', function() { 
     // set the animation value depending on presence of class 'forward' 
     var pos = box.hasClass('forward') && -300 || 0; 
     box.toggleClass('forward'): // switch class 'forward' on/off at each click 
     box.animate({left: pos}, 500); 
    }); 
}); 

Таким образом, каждый щелчок добавляет новую анимацию в очереди анимации. Это означает, что если вы нажмете три раза, то коробка будет идти один раз до left=0, затем до left=-300 и снова до left=0. Если вы не хотите, чтобы добавить анимацию, но по щелчку прерыванию бегущих один и идти обратным использовать jQuery.fn.stop перед тем одушевленным:

 box.stop().animate({left: pos}, 500);