html javascript淡入淡出图片循环

Question

如何在循环中淡入淡出图像？ 我希望图像一直淡入淡出，直到用户将鼠标悬停在图像上，当我想要显示图像时，以及当鼠标离开图像时，淡入将继续。 / p>

如何使用html / css / javascript / jquery？

Answer 1

这是jsFiddle解释如何实现这一点;）

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');
})

Answer 2

切换淡入淡出的简单功能：

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

悬停时阻止它：

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

简单

Answer 3

<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>