html javascript淡入淡出图片循环[关闭]答案

【问题标题】：html javascript fade in and out picture loop [closed]html javascript淡入淡出图片循环[关闭]
【发布时间】：2014-07-21 21:40:55
【问题描述】：

如何在循环中淡入和淡出图像？我希望图像一直淡入和淡出，直到用户将鼠标悬停在图像上，这就是我希望显示图像的时间，并且当鼠标离开图像时 - 淡入将继续。

如何使用 html/css/javascript/jquery 来实现？

【问题讨论】：

通过编写html/css/javascript/jquery.
既然存在许多 jquery Slideshow 插件，为什么还要重新发明轮子？
我猜你可以使用 CSS3 animation-play-state: paused
stackoverflow.com/questions/9319573/…
哪里不会为你写完整的东西，但我们建议你至少为自己尝试一些插件，如果你被卡住了，也许发布你尝试过的东西，我们也许可以提供帮助你更

标签： javascript html css

【解决方案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');
})

【讨论】：

如果对您有帮助，请接受解决方案:)！
可以，但现在我发现它在 IE 中不起作用。
在谷歌中检查我发现要在 IE 中工作的解决方案需要是：'animation: flicking 2s infinite;'而不是“无限”

【解决方案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();
})

很简单

【讨论】：

【解决方案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>

【讨论】：