FadeIn/Out Text

by Alin Guta

HTML

<div id="help">
<p class="helper" data-timeout-value="5000" id="1">Do you...?</p>
<p class="helper" data-timeout-value="700" id="2">Do you still...?</p>
<p class="helper" data-timeout-value="8000" id="3">Do you really still...?</p>
</div>

<div id="image1"></div>
<div id="image2"></div>
<div id="image3"></div>

<div class="clear cancel">Cancel</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Cabin:400,500,700);

p.helper {
    display: none;
    font-size:14px;
    color:#EB6D47;
    font-family: 'Cabin', sans-serif;
    font-weight:normal;
    float:left;
}
#image1{
    display:none;
    width:16px;
    height:16px;
    background:url("http://png-4.findicons.com/files/icons/2358/boolean/16/ok.png") no-repeat;
}
#image2{
    display:none;
    width:16px;
    height:16px;
    background:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgBBgkBBwgKCgELDRYPDQwMDRsUFRAWIB0iIhQdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc0NDc3Nzc3Nzc3Nzc3Nyw3Nzc3Nzc3Nzc3Nzc3N//AABEIABAAEAMBEQACEQEDEQH/xAAXAAADAQAAAAAAAAAAAAAAAAAEBgcC/8QAKhAAAgAEBAMJAQAAAAAAAAAAAQIDBBEhAAUGBxIxUQkTIjIzQWFxgQj/xAAXAQADAQAAAAAAAAAAAAAAAAACAwQF/8QAHxEAAgIBBAMAAAAAAAAAAAAAAQIAA0EEESEjEhPw/9oADAMBAAIRAxEAPwCgzWdLuGzajeYjppao4EguUCg+WpFyT0xclOwmZZqSxzCZSemtgp6V0XNPFbQk0QBDjPxPDJshrzubUOAZFdCy4jEseuwK2Yoxs1zHspp2Y28dYMztC14XenwFh6bhvZhQVHx9HDuu5RvwZN3adyF5B+3mdIJP/wBl54m+k5McWnFirGiRmNFJU1VV63pysB+YK+1Fr8FEDS0Wvb7HPM//2Q==") no-repeat;
}
#image3{
    display:none;
    width:16px;
    height:16px;
    background:url("http://mywordpress.ru/plugins/wp-content/plugins/cforms/js/css/images/ok.png") no-repeat;
}
.clear{clear:both;}
.cancel{
    position:relative;
    cursor:pointer;
}

JavaScript

var helper = $(".helper");
var helperIndex = -1;

(function showNextHelp() {
    ++helperIndex;
    helper.eq(helperIndex % helper.length)
          .fadeIn(500)
          .delay(1000)
          .fadeOut(500, showNextHelp);
})();

helper.on('click', function(){
   $("#help").fadeOut(500);
   $("#image" + this.id).addClass('active')
                        .fadeIn(500)
                        .delay($(this).data('timeout-value'))
                        .queue(function(next) {
                            $(this).fadeOut(500, function() {
                                $(this).removeClass('active');
                            });
                            $("#help").fadeIn(500);
                            next();
                        });
});

$('.cancel').click(function(){
    $('.active').stop(true, true).fadeOut(500);
    $("#help").stop(true, true).fadeIn(500);
});