1

我需要一些认真的帮助。我试图创建反弹效果，但它不适用于锚文本类/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>

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

4

3 回答 3

0

您没有阻止链接的默认行为，例如它在您看到反弹效果之前刷新页面。

我会尝试以下方法：

$('#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);
    });
});
于 2012-07-31T10:35:18.153 回答
0

现在的问题是我无法使 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);

    });
});
于 2012-07-31T10:37:56.890 回答
0

这个怎么样

$(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/

于 2012-07-31T11:25:06.417 回答