在悬停时从按钮滑出div

Question

我正在学习一些jQuery，并且我创建了一个按钮，当点击时，切换包含彩色按钮的div：

按下这些彩色按钮时，主（白色按钮）会根据按下的颜色改变颜色。但是，有没有一种方法可以让这个div的彩色按钮从按钮div（例如，向右）滑出，鼠标悬停在哪里可以选择它们？

这是我到目前为止的jQuery：

//When clicking diff colours
$("ul").on("click", "li", function() {
  $('button').removeClass().addClass(this.className);
});

//When white button is pressed
$("#revealColorSelect").click(function(){
  //Show color select or hide the color select
  changeColor();
  $("#colorSelect").toggle();
});

//update the new colour
function changeColor() {
  var p = $("#pink").val();
  var pur = $("#purple").val();
  var r = $("#red").val();
  var b = $("#blue").val();
  var g = $("#green").val();
  var o = $("#orange").val();
};

Answer 1

你可以toggle这样运作。请记住，你必须为此添加Jquery ui。

$("#revealColorSelect").on("mouseover",function() {
  //Show color select or hide the color select
  $('#colorSelect').toggle('slide', {
    direction: 'right'
  }, 500, function() {
    changeColor();
  })    
});

工作小提琴：https://jsfiddle.net/2o61gyyr/