jquery - jQuery动画div和选择选项

Question

我有一些使用 jQuery 制作“滑块”的经验，但是我第一次遇到这个问题。在我的 div 中，我插入了一个选择字段，当我尝试更改它时，在 div 滑出后，它会滑回。

我在这里发布了代码。

Answer 1

嗨，这段代码应该可以完成你的工作..!! ,

工作演示@http://jsfiddle.net/fpjDg/13/

jQuery(document).ready(function() {
    jQuery(".slider").hover(function(e) {

        jQuery(this).animate({
            left: "0"
        }, 700)
    }, function() {

        //  e.preventDefault();
        //slide out when options are selected.
        $("select").change(function() {

            //Call this  line only when the work is completed in the  form.
            jQuery(".slider").stop(true, false).animate({
                left: "-270px"
            }, 700);

        }); //change
    }); //hover
}); //ready 

Answer 2

这似乎是预期的行为，我看到了一些选择。

1) 使用jQuery 插件将选择元素交换为使用 div/ul/li 元素的下拉菜单。这不应触发 mouseleave 事件，因为它将这些元素视为框的一部分。（由于某种原因，选择框选项不会发生这种情况）

2）这可能更hacky，但如果鼠标坐标在框内，你可以检查mouseleave，如果是don't hide the box，否则hide the box。

3) 不要在 mouseleave 上隐藏，而是使用关闭按钮或文档上的单击处理程序等。

Answer 3

jQuery(document).ready(function() {
    jQuery(".slider").hover(function() {
        jQuery(this).animate({
            left: "0"
        }, 700)
    }, function(e) {
        var within = $(e.target).parents().is('.slider')
        if (!within) {
            jQuery(".slider").stop(true, false).animate({
                left: "-270px"
            }, 700);
        }
    });
});

工作样本