Question

I need some serious help. Im trying to create a bounce effect, however it doesnt work on anchor text classes/divs.

this is the code I used: http://viralpatel.net/blogs/jquery-bounce-effect-bounce-html-js/

Its based off a very simple and short tutorial. The issue now is that I cant make the javascript code target a class or div that is inside a anchor / link.

How do I actually solve this? the code is in the website above and the section of code that im trying to bounce is highlighted in bold:

                <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>

Edit: I think this issue is impossible to solve. I wondering if this is even solvable now. The background is removed everytime the class bounces.

Answer 1

You haven’t prevented the default behavior of the link, such that it’s refreshing the page before you see the bounce effect.

I’d try the following:

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

Note if you have other events that are bound to the anchor tag in question, remove the e.stopPropagation(); call.

edit
I just noticed you mentioned the same problem for divs. Are you wrapping your code in jQuery’s document.ready handler?

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