Question

我只是JavaScript的初学者，但我尝试做一些功能，我跟踪互联网上的一些人

我试图隐藏并显示菜单。

我的目的是当我将鼠标移动到菜单时，它将从下到上显示，当我将鼠标移到外面时，它将从上到下缓慢移动。我可以使用Click Function，但是当我尝试使用movemouse和mouseleave时，它无法工作。

我创建了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();  
});

我希望有人可以给我一些建议。感谢

Answer 1

只需调用该函数，因为您已经将该函数中的绑定元素设置为动画：

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

根据您的要求，我认为您需要使用mouseenter和mouseleave：

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

Answer 2

这是你的jsfiddle link

您需要应用以下代码

$( "#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 );
  });

Answer 3

嘿伙计，试试这个：

$('#select').hover(function (){
    // when mouse hover
    showSelect();
}, function (){
    // when mouse out
    hideSelect();
});

如何使用动画？

3 个答案: