Question

我有以下代码来淡化箴言：

function roter() {
  $("#test-rotator .roter:hidden:first").fadeIn(500).delay(1000).fadeOut(500, function() {
    $(this).appendTo($(this).parent());
  roter();
  }).mouseover(function(){
     $(this).stop(true, false); 
    })
  .mouseout(function(){
     //??????? 
    });
}
roter();

HTML结构：

<div id="test-rotator">
<div class="roter" style="display: none;">
<div id="left-quote"></div> 
<div id="center-quote">Lorem ipsum dollor sit amet.</div>
<div id="right-quote"></div>
<div id="testmonials-name">- John Doe -</div>
</div><div class="roter" style="display: none;">
<div id="left-quote"></div> 
<div id="center-quote">Ipsum dollor incuos nexus inram.</div>
<div id="right-quote"></div>
<div id="testmonials-name">- Author -</div>
</div>
</div>

CSS结构：

.roter {
    display: none;
}
#left-quote {
    width: 39px;
    height: 67px;
    float: left;
    background-image: url(https://www.tetongravity.com/forums/images/tetongravity/theme/misc/quote_icon.png);
    background-repeat: no-repeat;
}
#testmonials-name {
    clear: both;
    text-align: center;
    color: #fff;
    font-size: 12px;
}
#center-quote {
    width: 602px;

    height: 67px;
    float: left;
    text-align: center;
    line-height: 18px;
    display: block;
    margin-top: 8px;
    color: #fff;
    font-family:Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Verdana," sans-serif";
}
#right-quote {
    width: 39px;
    height: 67px;
    float: left;
    background-image: url(https://www.tetongravity.com/forums/images/tetongravity/theme/misc/quote_icon.png);
    background-repeat: no-repeat;
    clear: right;
}

但是如何在mouseout功能上播放动画？ HTML和CSS结构已更新。这是一个不起作用的jsfiddle：fiddle小提琴不起作用，我把它作为一个例子

Answer 1

我不知道您的HTML结构，但我建议您使用.hover()。

这是一个基本的例子：

＆＃13;

var handlerIn = function () {
  $(this).css("background-color", "black");
};

var handlerOut = function () {
  $(this).fadeOut();
};

$("#test").hover(handlerIn, handlerOut);

＆＃13;

#test {
  color: white;
  font-weight: bold;
  font-size: 30px;
  padding: 10px;
  background-color: blue;
  width: 100px;
  text-align: center;
}

＆＃13;

<div id="test">Test</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Jquery Play停止动画

1 个答案: