如何使用动画

How to use the animate?

本文关键字：动画 何使用      更新时间：2023-09-26

我只是JavaScript的初学者，但我尝试做一些功能，我在互联网上关注某个人

我正在尝试隐藏和显示菜单。

我的目的是当我将鼠标移动到菜单时，它会从下到上

显示，当我将鼠标移动到外部时，它将从上到下缓慢移动。我可以使用单击功能，但是当我尝试使用移动鼠标和鼠标离开时，它不起作用。

创建2函数 

function showSelect() {
    $("#select").animate({"bottom": 0}, 300, 'linear');
}
function hideSelect() {
    $("#select").animate({"bottom": -148}, 300, 'linear');
}

这段代码移动我的鼠标：

$("#select").mousemove(function() {
    $("#select").showSelect();
}).mouseleave(function() {
    $("select").hideSelect();  
});

我希望有人能给我一些建议。谢谢

这是你的jsfiddle链接

您需要应用以下代码 

$( "#select" ).mouseout(function() {
 $("#select").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
  });
  $( "#select" ).mouseover(function() {
 $("#select").animate({
    width: "90%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
  });

只需调用该函数，因为您已经在该函数中绑定元素以制作动画：

    //$("#select").showSelect();
    showSelect();

根据您的要求，我认为您需要鼠标输入和鼠标离开：

$('#select').mouseenter(function() {
    showSelect();
}).mouseleave(function(){
    hideSelect();
});

嘿，伙计，试试这个：

$('#select').hover(function (){
    // when mouse hover
    showSelect();
}, function (){
    // when mouse out
    hideSelect();
});
相关文章：