Question

我有一个在页面加载时切换的音乐播放器。要显示播放器用户必须单击按钮。如何在切换显示后让玩家消失，如果鼠标悬停在玩家上方，让玩家保持显示？

$(document).ready(function(){
    $(".scplay").hide();
    

    $(".musicbutton").click(function(){
        $(".scplay").fadeToggle();
    });

        
    $(".scplay").hover(function(){
        $(".scplay").show();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="musicbutton">musicbutton</button>
<div class="scplay">scplay</div>

Answer 1

您可以使用setTimeout()方法：

$(document).ready(function() {
  var element = $(".scplay");
  element.hide();
  $(".musicbutton").click(function() {
    element.fadeToggle(3000, function() {
      setTimeout(function() {
        //your code here
        element.css('color', '#F00');
      }, 15000)

    });
  });
  //this does not make sense
  element.hover(function() {
    element.show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="musicbutton">musicbutton</button>
<div class="scplay">scplay</div>

在隐藏元素上使用悬停没有意义，元素本身必须可见才能使用 hover 就可以了。如果您需要任何进一步的帮助，请说出这个词。

Answer 2

$(".musicbutton").click(function(){
        setTimeout(function(){$(".scplay").fadeToggle();},15000);

    });

这将为您完成工作。它将在15000ms后执行$(".scplay").fadeToggle();代码

Answer 3

我不确定你想要获得什么，但是使用fadeToggle（）你没有多少控制权。

你可以做的是在两个单独的fadeIn和fadeOut

上分割功能

＆＃13;

$(".musicbutton").click(function(){
   if($(this).hasClass("active")){ //when button is clicked OFF
      $(".message").empty().text("you just unclicked button - wait 1,5 second");
      setTimeout(function(){
          $(".scplay").fadeOut();
          $(".message").empty().text("button is un-clicked, cool!");
      }, 1500);
      $(this).removeClass("active");
   }  else {//when is clicked
      $(".scplay").fadeIn();
      $(".message").empty().text("button is clicked");
      $(this).addClass("active");
   }   
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="musicbutton">My button</div>

<div class="message"></div>

＆＃13;

更进一步，您可以在fadeOut（）或fadeIn（）函数

上进行回调

$(".scplay").fadeOut(400, function(){  
do whatever you want after animation complete
});

Answer 4

您可以将函数传递给将在切换结束时发生的FadeToggle，因此您需要传递一个带有setTimeout的函数，该函数将再次生成fadeOut

＆＃13;

$(document).ready(function(){
    var $scplay = $(".scplay"); // to avoid extra calling of jquery function
    $scplay.hide();
    

    $(".musicbutton").click(function(){
        $scplay.fadeToggle(function() {
             setTimeout(function(){ $(".scplay").fadeOut(); }, 15000);
        });
    });

        
    $scplay.hover(function(){
        $scplay.show();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="musicbutton">musicbutton</button>
<div class="scplay">scplay</div>

＆＃13;

Answer 5

   dependencies {
    compile 'com.android.support:multidex:1.0.1'
}

Answer 6

试试这个，你可以使用setTimeout函数。

$(document).ready(function(){
   $(".scplay").hide();    

   $(".musicbutton").click(function(){
      $(".scplay").fadeToggle();
   });

  $(".scplay").hover(function(){
    $(".scplay").show();
    setTimeout(function () { $('.scplay').fadeOut('fast'); }, 15000);
  });
});

Answer 7

每次使用jQuery show（）或toggle（）函数时都使用回调函数。

＆＃13;

$(document).ready(function(){
    $(".scplay").hide();
    
    function callback(){
        clearTimeout(t);
        window.t = setTimeout(function() {
            $(".scplay").hide();
        }, 15000);
    }

    $(".musicbutton").click(function(){
        $(".scplay").fadeToggle(callback);
    });

        
    $(".scplay").hover(function(){
        $(".scplay").show(callback);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="musicbutton">musicbutton</button>
<div class="scplay">scplay</div>

＆＃13;

Answer 8

调用悬停在隐藏元素上是不可能的，你可以将.scplay类放在div中并在该div上调用hover事件这是一个jsfiddle：https://jsfiddle.net/kdr7pL1s/

Answer 9

使用setTimeout（）在不悬停时隐藏.scplay。
使用布尔值（bPlayerStatus）控制setTimeout。
这里，setTimeout位于一个名为setTime（）的单独函数中。
因此，当“hover”事件发生时，t（setTimeout）将被清除。
当.musicbutton“click”或.scplay“mouseleave”发生时t将被设置为setTimeout（togglePlayer，15000）

$(document).ready(function(){
  var bPlayerStatus = false,
      scplay = $(".scplay"),
      t;

  scplay.hide();

  function togglePlayer () {
    scplay.fadeToggle();
  }
  function setTime () {
    clearTimeout (t); 
    if (!bPlayerStatus) {
      t = setTimeout (togglePlayer, 5000);
    }
  }

  $(".musicbutton").click(function(){
    bPlayerStatus = false;
    togglePlayer ();
    setTime ();
  });

  scplay.hover(function(){
    if (!bPlayerStatus) {
      bPlayerStatus = true;
      setTime ();
    }
  });   
  $(scplay).mouseleave(function(){
    bPlayerStatus = false;
    setTime ();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="musicbutton">musicbutton</button>
<div class="scplay">scplay</div>

如何在切换后15秒隐藏div

9 个答案: