当我将鼠标悬停在其上时,我想要一个特定的幻灯片停止。
我试过的javascript代码:
$( ".rotate-slider" ).hover(function() {
$( this ).find( ".rotate-slider" ).stop( true, true ).fadeOut();
}, function() {
$( this ).find( ".rotate-slider" ).stop( true, true ).fadeIn();
});
我也尝试用css来获取它:
.rotating-slide:hover .slider
{
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
不幸的是,以上代码似乎都不起作用。
答案 0 :(得分:2)
您可以在此处查看更新的代码:jsfiddle.net/bharatsing/mqv1w538/8/
您需要在悬停时使用clearInterval,并且在悬停时需要再次初始化
function SOC() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['SOC', 10]
]);
var options = {
width: 250, height: 250,
redFrom: 0, redTo: 10,
yellowFrom: 10, yellowTo: 25,
minorTicks: 5,
majorTicks: ['0','25','50','75','100']
};
var formatter = new google.visualization.NumberFormat({
suffix: '%',
fractionDigits: 0
});
formatter.format(data, 1);
var chart = new google.visualization.Gauge(document.getElementById('SOC'));
chart.draw(data, options);
setInterval(function() {
$.ajax({
url: "soc.php",
dataType: "JSON",
data:{},
success: function(x){
console.log(x["SOC"]);
data.setValue(0, 1, x["SOC"] );
chart.draw(data, options);
}
});
}, 2000);
}