交叉渐变DIV +在悬停时停止动画

时间:2015-01-26 13:13:38

标签: javascript jquery html css image

是否可以这样做: http://jsfiddle.net/arunpjohny/asTBL/

jQuery(function () {
var $els = $('div[id^=quote]'),
    i = 0,
    len = $els.length;

$els.slice(1).hide();
setInterval(function () {
    $els.eq(i).fadeOut(function () {
        i = (i + 1) % len
        $els.eq(i).fadeIn();
    })
}, 2500)
})

但是,DIV直接相互交叉渐变而不是首先褪色为白色然后从白色渐渐消失?

此外,是否可以在悬停时停止动画(并在不悬停时恢复)?

我搜索了几个解决方案但是找不到办法(我用javascript写了一个菜鸟)。 CSS解决方案并不符合我的需求,因为它们无法正常使用内部有链接的DIV ......

提前非常感谢你。

2 个答案:

答案 0 :(得分:0)

要使你的div同时淡出,你需要添加一些样式(使引号相互叠加)并同时运行淡入淡出。然后,您需要清除悬停时的超时以暂停动画:



jQuery(function () {
    var $els = $('div.quote'),
        i = 0,
        len = $els.length;

    $els.slice(1).hide();
    var fadeInterval = setFadeInterval(); // starts the fader

    $els.hover(function () {
        clearInterval(fadeInterval); // stops the fader on mouseover
    },

    function () {
        fadeInterval = setFadeInterval(); // restarts the fader on mouseout
    });

    function setFadeInterval() {
        return setInterval(function () {
            $els.eq(i).fadeOut(); // run the faders at the same time
            i = (i + 1) % len
            $els.eq(i).fadeIn();
        }, 2500);
    }
});

/* make the faders sit on top of each other */
#quote-holder {
    position:relative;
}
#quote-holder > .quote {
    position:absolute;
    top:0;
    left:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="quote-holder">
    <div id="quote1" class="quote"> <span class="quote">I am a quote</span>
 <span class="author">Author Name</span>

    </div>
    <div id="quote2" class="quote">I am another quote</div>
    <div id="quote3" class="quote">I am yet another quote</div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

JSFIDDLE

jQuery(function () {
var $els = $('div[id^=quote]'),
    i = 0,
    len = $els.length;

$els.slice(1).hide();
var timer = setInterval(animation, 2500)
function animation(){
     $els.eq(i).fadeOut(function () {
        i = (i + 1) % len
        $els.eq(i).fadeIn();
    })
}
$('#content').hover(function (){
clearInterval(timer);  
  },function (){
  setInterval(animation,2500);
})

})

我重构你的代码并创建一个动画函数来实现。