Jquery彈跳效果不適用於應用於錨定標記的類

我需要一些認真的幫助。我試圖創建一個反彈效果，但它不適用於錨文本類/ div。Jquery彈跳效果不適用於應用於錨定標記的類

這是我使用的代碼：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>

編輯：我認爲這個問題是不可能解決的。我想知道現在是否可以解決。每當班級反彈時，背景都會被刪除。

來源

2012-07-31 Demorus

創建jsfilddle .... – 2012-07-31 10:32:25

這裏Jfiddle：http://jsfiddle.net/96kXt/25/ 它實際上它反彈似乎，但任何背景圖像或顏色消失，同時它...不能解決這個問題嗎？ – Demorus 2012-07-31 11:31:45

您尚未阻止鏈接的默認行爲，例如在您看到反彈效果之前刷新頁面。

我會嘗試以下方法：

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

注意如果您有綁定到有問題的錨標記的其他事件，刪除e.stopPropagation（）;呼叫。

編輯我剛剛注意到你提到了divs的相同問題。你在jQuery的document.ready處理程序中包裝你的代碼嗎？

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

來源

2012-07-31 10:35:18 hedgehog

我會試試看！非常感謝您的快速回復。我會讓你馬上知道，如果它在jQuery.jplayer.settings.js工作 – Demorus 2012-07-31 10:40:06

，您有以下幾點：（「JP-分組，.JP-NEXT」） $ \t \t。點擊（函數（） {$（this）.is（'。jp-next'）？？？？？？？？？？？'next'：'prev'） \t \t \t return false; \t \t}）如果您在單獨的文件中設置反彈效果，此處的返回false行可能會阻止其他事件執行。 – hedgehog 2012-07-31 11:09:00

所以你建議我最好留下反彈效應？ – Demorus 2012-07-31 11:11:15

現在的問題是，我不能讓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-31 10:37:56

它只是沒有工作:( – Demorus 2012-07-31 11:22:01

這個怎麼樣

$(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-31 11:25:06 Nick

您的代碼的作品，但不是爲類試圖反彈：http://jsfiddle.net/96kXt/25/ – Demorus 2012-07-31 11:30:06

替換.jp-more-songs用!!!檢查jsfiddle – Nick 2012-07-31 11:33:22

我試了一下，試了a.jp-next，一切都好，每次我點擊它的時候，背景都消失了，直到它完成了彈跳，換句話說，這個人將無法看到彈跳 – Demorus 2012-07-31 11:37:22

Jquery彈跳效果不適用於應用於錨定標記的類

回答

相關問題