Question

我需要一些认真的帮助。我试图创建一个反弹效果，但它不适用于锚文本类/ div。

这是我使用的代码：http://viralpatel.net/blogs/jquery-bounce-effect-bounce-html-js/

它基于一个非常简单和简短的教程。现在的问题是我无法使javascript代码成为锚/链接内的类或div。

我如何解决这个问题？代码在上面的网站中，我试图反弹的代码部分以粗体突出显示：

                <div id="jplayer">
    </div>
    <div class="jp-audio">
      <div class="jp-type-single">
        <div id="jp_interface_1" class="jp-interface">
        <ul class="jp-controls">
            <li><a href="#" **class="jp-play"**></a></li>
            <li><a href="#" class="jp-pause"></a></li>
            <li><a href="#" class="jp-prev"></a></li>
            <li><a href="#" class="jp-next"></a></li>
            <li><a href="audio_samples.php" class="jp-more-songs">Listen to more Audio Samples</a></li>
        </ul>
          <div class="jp-progress">
            <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
            </div>
        </div>
        <div class="jp-title"></div>
        </div>

编辑：我认为这个问题无法解决。我想知道这现在是否可以解决。每次课程反弹时都会删除背景。

Answer 1

您没有阻止链接的默认行为，以便在看到跳出效果之前刷新页面。

我会尝试以下方法：

$('#jp_interface_1 a').click(function(e) {
    e.preventDefault(), e.stopPropagation();
    $(this).effect("bounce", { times:5 }, 300);
});

注意如果您有其他事件绑定到相关的锚标记，请删除e.stopPropagation（）;调用

修改我刚刚注意到你提到了div的同样问题。您是否将代码包装在jQuery的document.ready处理程序中？

$(function() { $('#jp_interface_1 a').click(function(e) { e.preventDefault(), e.stopPropagation(); $(this).effect("bounce", { times:5 }, 300); }); });

Answer 2

现在的问题是我无法将javascript代码定位为锚点/链接中的类或div。

 <div class="div1">  div text
  <a class="ancClass" href="#">Back</a>  
  </div>

...这将有助于您找到

 $('.div1 a.ancClass');

反之亦然

编辑： 我不明白你想要实现的是你正在尝试的是什么？

$(document).ready(function(){  
 $('.jp-interface a.jp-next').click(function(e) {         
    $('.jp-more-songs').effect("bounce", { times:5 }, 300);

    });
});

Answer 3

这个怎么样

$(document).ready(function(){  
    $('#jp_interface_1 .jp-more-songs').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        $(this).effect("bounce", { times:5 }, 300);
    });
})

http://jsfiddle.net/96kXt/23/

Jquery Bounce Effect不适用于应用于锚标记的类

3 个答案: