Question

我是Jquery的新手，我正在尝试设置一个搜索字段来设置动画，然后当您点击关闭图标（#search-close）时，它会动画显示，＃search-close按钮会消失。

动画制作工作正常，但当我点击关闭按钮时，它会动画出来，但会立即再次动画

我知道这很简单

提前致谢

<script type="text/javascript">      

$j(document).ready(function() {

$j('#search-slide').mousedown(function() {
$j('#search-close').fadeIn(100);
$j('#search-slide').animate({'left':-1});
$j('#tbcopy a').fadeOut(100);});

$j('#search-close').mousedown(function() {
$j('#search-close').stop().hide();
$j('#search-slide').stop().animate({'left':-250});
});});


</script>

Answer 1

添加.stop(true,true)这会将clearqueu设置为true并跳转到动画结束。

Answer 2

我相信，您收到此错误的原因是由于关闭按钮的位置，因为它位于顶部div中，您实际上会触发两个点击事件。你的stop（）不起作用的原因可能是因为它们具有不同的动画队列，因为它们是不同的元素。尝试在动画完成之前检查的外部div添加一个布尔值。

Answer 3

我建议你使用.finish（）方法，因为它类似于.stop（true，true），但是.finish（）实际上会完成动画而不是在中间停止。

Answer 4

您可以添加一个类，以防止在单击后再次触发该框。

$(document).ready(function () {
    $('#search-slide').click(function () {
        if ($(this).hasClass('visible')) {
            console.log('triggered');
            return;
        } else {
            $('#search-close').fadeIn(100);
            $(this).animate({
                'left': -1
            }).addClass('visible');
            $('#tbcopy a').fadeOut(100);
        }
    });
    $('#search-close').click(function () {
        $(this).stop().hide();
        $('#search-slide').stop().animate({
            'left': -250
        });
    });
});

工作jsfiddle。同样请注意，我的解决方案不会再打开该框，但是如果您没有指定，则希望它再次打开。

animate不会.stop（） - 烦人的简单的Jquery问题

4 个答案: