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);     
  });
});

但是当我选择使用<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>切换我的jquery版本时 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);

.toggle jQuery问题，同时切换jQuery的库版本

1 个答案: