2

我是 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>
4

4 回答 4

3

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

于 2013-07-18T14:01:17.367 回答
2

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

于 2013-07-18T15:50:27.360 回答
1

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

于 2013-07-18T14:12:24.687 回答
-1

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

$(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。请注意，我的解决方案不会再次打开该框，但由于您没有指定，您希望它再次打开。

于 2013-07-18T16:39:26.620 回答