html javascript fade in and out picture loop

Question

How can I fade in and out an image on a loop? I want the image to fade in and out all the time until the user put the mouse hover the image, that's when I want the image to be shown, and when the mouse leaves the image- the fading will continue.

How can I do it with html/css/javascript/jquery?

Why reinvent the wheel, when many jquery Slideshow plugins exists? — IndieRok, Jul 21 '14 at 13:25
http://stackoverflow.com/questions/9319573/how-to-repeat-loop-jquery-fadein-fadeout-fadein — Nicolas, Jul 21 '14 at 13:27
Where are not going to write the whole thing for you, but we suggests you at least try a few plugins for yourself and if you are stuck, maybe post what you tried and we might be able to help you more — IndieRok, Jul 21 '14 at 13:28
This isn't a place for you to ask for code. This is a place to help solve problems with your code. — davidxd33, Jul 21 '14 at 13:33

score 1 · Accepted Answer · answered Jul 21 '14 at 13:36

Here's a jsFiddle explaining how to achieve that ;)

html

<div id="your_flipping_img" class="animate"></div>

CSS

#your_flipping_img{
    background-color:red;
    width:150px;
    height:150px;
}

.animate{
    -webkit-animation: flicking 2s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;
    animation: flicking 2s infinity;
    animation-iteration-count: infinite;
}

@-webkit-keyframes flicking {
  0%   {opacity:1}
  25%  {opacity:0}
  50%  {opacity:1}
  75%  {opacity:0}
  100% {opacity:1}
}

/* Standard syntax */
@keyframes flicking {
  0%   {opacity:1}
  25%  {opacity:0}
  50%  {opacity:1}
  75%  {opacity:0}
  100% {opacity:1}
}

JS

$('#your_flipping_img').bind('mouseover', function(){
   $('#your_flipping_img').removeClass('animate');
})

$('#your_flipping_img').bind('mouseout', function(){
    $('#your_flipping_img').addClass('animate');
})

Checked in google I found out that for the solution to work in IE it needs to be: 'animation: flicking 2s **infinite**;' instead of "infinity" — user2254436, Jul 24 '14 at 07:41

score 0 · Answer 2 · answered Jul 21 '14 at 13:36

A simple function for toggle fading :

var hover = false;
function myFunction()
{
    if(!!hover)return;
    $("#pic").fadeToggle();
    setTimeout(myFunction(), 600);
}

Prevent it if hover :

$("#pic").mouseenter(function()
{
    hover = true;
    $(this).fadeIn()
})
$("#pic").mouseleave(function()
{
    hover = false;
    myFunction();
})

As simple

score 0 · Answer 3 · answered Jul 21 '14 at 13:40

<script type="text/javascript">
    var timer;
    var opacityValue = 0; 
    function animate(event, object)
    {
        if(event == 'stop') {
            clearTimeout(timer);
        } else { 
            timer = setTimeout(function(){
                object.animate({
                    opacity:opacityValue
                });
                opacityValue = opacityValue ? 0 : 1;
                animate('start',object); 
            },1000);
        }
    }

    $('.imageClass').hover(function(){
        animate('stop',$(this));
    },function(){
        animate('start',$(this));
    });
    animate('start',$('.imageClass'));
</script>

html javascript fade in and out picture loop

3 Answers3

html

CSS

JS