停止與jquery懸停的多個動畫的雙循環

好吧..所以我知道有一些類似的問題，但我已經閱讀了他們，仍然我的代碼仍然存在問題。我在同一個容器內有一個圖像和一個文本。隨着文本淡出，圖像應該淡入。此外，它們中還有多個包含圖像和文本的容器。停止與jquery懸停的多個動畫的雙循環

我得到的代碼工作，但它看起來非常醜陋，它似乎不工作得很好。有關如何改善此問題的建議？

這裏是一個工作示例： http://jsfiddle.net/pedromvpg/ekbf2/

的代碼：

$(function() { 

    function image_pulse(element){ 
     element.animate({opacity:0.3}, 700, function(){ 
      element.animate({opacity:1}, 700, function(){ 
       element.animate({opacity:0.3}, 700, image_pulse(element));  
      }); 
     });    
    } 

    function text_pulse(element){ 
     element.animate({opacity:1}, 700, function(){ 
      element.animate({opacity:0}, 700, function(){ 
       element.animate({opacity:1}, 700, text_pulse(element));  
      }); 
     });    
    } 


    $('.pulser_new').each(function (i) { 
     text_pulse($(this).children('.fader_title')); 
     image_pulse($(this).children('.fader_image')); 
    }); 

    $('.pulser_new').hover(
     function() {     
      $(this).children('.fader_image').stop(); 
      $(this).children('.fader_image').animate({opacity:0.3},700); 
      $(this).children('.fader_title').stop(); 
      $(this).children('.fader_title').animate({opacity:1},700); 
      //alert("in"); 
     }, 
     function() { 
      image_pulse($(this).children('.fader_image')); 
      text_pulse($(this).children('.fader_title')); 
      //alert("out");  
     } 
    );

}）;

在此先感謝！

來源

2012-03-10 Pedro Gonçalves

你好，只是幾個建議 - 1）閱讀有關JQuery的鏈接，即你可以將函數與in元素鏈接起來，這樣可以避免多行事件綁定到同一個元素。也2）我通常遵循DRY（不要重複自己的原則），即如果你可以爲你的 - >'代碼'text_pulse（$（this）.children（'。fader_title'））創建一個通用函數。 image_pulse（$（this）.children（'.fader_image'））;我發現這些提示很有幫助。 http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx;希望它能爲您提供良好且有用的信息，tc – 2012-03-10 03:38:12

所以，我能夠清理一些代碼並使其更好地工作。我的猜測是，我沒有在（文件）。就緒...

工作示例運行的東西：http://jsfiddle.net/pedromvpg/XtZyr/

function image_pulse(element){ 
    var fadeDuration = 650; 
    element.css({ opacity: 0.33 }); 
    element.animate({ 
     opacity: 1 
    }, fadeDuration, function() { 
     element.animate({ 
      opacity: .33 
     }, fadeDuration, function() { 
       image_pulse(element); 
     }) 
    }); 
} 


function text_pulse(element){ 
    var fadeDuration = 650; 
    element.animate({ 
     opacity: 0 
    }, fadeDuration, function() { 
     element.animate({ 
      opacity: 1 
     }, fadeDuration, function() { 
       text_pulse(element); 
     }) 
    }); 
} 


jQuery(document).ready(function() { 

    $('.pulser_new').each(function (i) { 
     image_pulse($(this).children('.fader_image')); 
     text_pulse($(this).children('.fader_title')); 
     $(this).mouseover(function() { 
      $(this).children('.fader_image').stop().animate({opacity:0.3},700); 
      $(this).children('.fader_title').stop().animate({opacity:1},700); 
     }).mouseout(function() { 
      $(this).children('.fader_image').stop();   
      $(this).children('.fader_title').stop();   
      image_pulse($(this).children('.fader_image')); 
      text_pulse($(this).children('.fader_title')); 
     });   
    }); 

});

來源

2012-03-13 15:47:14

停止與jquery懸停的多個動畫的雙循環

回答

相關問題