停止与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");  
     } 
    );

}）;

在此先感谢！

你好，只是几个建议 - 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')); 
     });   
    }); 

});

停止与jquery悬停的多个动画的双循环

相关推荐