Остановить двойной цикл многократной анимации при наведении курсора с помощью jquery - PullRequest
Новая
       35

Остановить двойной цикл многократной анимации при наведении курсора с помощью jquery

0 голосов
/ 10 марта 2012

Хорошо. Итак, я знаю, что есть некоторые похожие вопросы, но я их прочитал, и все же мой код все еще не работает У меня есть изображение и текст внутри одного контейнера. Изображение должно исчезать по мере исчезновения текста. Также есть несколько контейнеров с изображением и текстом внутри них.

Я заставил код работать, но он выглядит ужасно и не очень хорошо работает. Любые предложения о том, как улучшить это?

Вот рабочий пример: 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");     
        }
    );

}); * +1011 *

Заранее спасибо!

1 Ответ

1 голос
/ 13 марта 2012

Итак, я смог немного почистить код и заставить его работать лучше. Я предполагаю, что я не запускал материал (документ) .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'));
        });          
    });

});



​
...