悬停时暂停幻灯片

时间:2017-01-02 11:38:49

标签: javascript jquery html css

当我将鼠标悬停在其上时,我想要一个特定的幻灯片停止。

我试过的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;
}

不幸的是,以上代码似乎都不起作用。

1 个答案:

答案 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);
}