摇动效果不起作用

时间:2017-07-04 05:31:06

标签: jquery jquery-ui

你能帮助理解为什么shake effect在我的情况下不起作用吗? 代码:

$('.vote').on('click', function (e) {
        e.preventDefault();
        $("body, html").animate({
            scrollTop: $( $(this).attr('href') ).offset().top
        },{
            duration: 600,
            complete: $('#shake').effect('shake')
        });
    });

我还尝试将effect放在preventDefault之后,但又没有成功。如果我在on click事件之外调用它,它可以正常工作。 提前谢谢!

修改 Html部分:

<div class="col-xs-6 col-sm-6">
                                <span class="upper">
                                    <a href="#force-reg"><span style="cursor:pointer;font-size: 40px;color: deepskyblue" class="unsigned glyphicon glyphicon-thumbs-up"></span></a>
                                </span>
                                    <span style="font-size: 40px; color: grey" class="thumb-post-up_<?= $post->id ?>"><?= $vote_up ?></span>
                                </div>
                                <div class="col-xs-6 col-sm-6">
                                <span class="upper">
                                    <a href="#force-reg"><span style="cursor:pointer;font-size: 40px;color: grey" class="unsigned glyphicon glyphicon-thumbs-down"></span></a>
                                </span>
                                    <span style="font-size: 40px; color: grey" class="thumb-post-down_<?= $post->id ?>"><?= $vote_down ?></span>
                                </div>

#shake div:

<?php if(!(\Yii::$app->user->isGuest)) : ?>
            <div class="col-md-6 text-right custom-title">
                <span style="cursor:pointer;margin-right: 12px;" id="add-comment" class="button button-accent">Добави коментар</span>
            </div>
        <?php else : ?>
            <div id="shake" class="col-md-6 col-sm-6 col-xs-12 text-right custom-title">
                <a href="http://find-doctor.webbuild.com/user/register"><span style="cursor:pointer;margin-right: 12px;"class="button button-accent">Само регистрираните потребители могат да коментират и гласуват!</span></a>
            </div>
        <?php endif; ?>

1 个答案:

答案 0 :(得分:1)

使用对象的问题,在您的示例中,您尝试获取点击链接的 href ,但指的是当前功能<强>动画即可。我从你的代码中创建了一个例子,试试这个:

$('.vote').on('click', function(e) {
  e.preventDefault();
  $("body, html").animate({
    scrollTop: $('.vote').offset().top
  }, {
    duration: 600,
    complete: $('#shake').effect('shake')
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

            <div id="shake" class="col-md-6 col-sm-6 col-xs-12 text-right custom-title">
                <a href="http://find-doctor.webbuild.com/user/register"><span style="cursor:pointer;margin-right: 12px;"class="button button-accent">Само регистрираните потребители могат да коментират и гласуват!</span></a>
            </div>
            
            <a href="#" class="vote">vote </a>