Question

好的..所以我知道有一些类似的问题，但我已经读过它们，但我的代码仍然是毛病。我在同一个容器中有一个图像和一个文本。当文本淡出时，图像应该淡入。此外，还有多个容器，其中包含图像和文本。

我让代码工作，但它看起来很丑陋，似乎效果不佳。关于如何改进这个的任何建议？

这是一个工作示例： 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");     
        }
    );

}）;

提前致谢！

Answer 1

所以，我能够清理一下代码并让它更好地工作。我的猜测是我没有运行（文件）.ready ...

工作示例：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在悬停时停止多个动画的双循环

1 个答案: